写一个简化版的jQuery（2、ajax）

之前写过一个jQuery的大致实现，但是那是不准确的，jQuery是使用构造函数实现的，并且他在文件内就已经执行了，这样，在外面就可以直接使用 $符号了。
之前的大致结构如下：

window.jQuery = function (nodeOrSelector) {
    let nodes = { length: 0 }
    if (typeof (nodeOrSelector) === 'string') {
        let temp = document.querySelectorAll(nodeOrSelector)
        for (let i = 0; i < temp.length; i++) {
            nodes[i] = temp[i]
            nodes.length = temp.length
        }
    } else if (nodeOrSelector instanceof Node) {
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }


    nodes.addClass = function (classes) {
        for (let i = 0; i < nodes.length; i++) {
            var node = nodes[i]
            for (let key in classes) {
                if (classes[key]) {
                    node.classList.add(key)
                }
            }
        }
    }
    return nodes
}

这个函数可以接受一个选择器或者节点，在执行后会返回出预设的方法

现在要把ajax的功能加上去，代码如下：

window.jQuery = function (nodeOrSelector) {
    // 一堆代码
}
window.$ = window.jQuery
window.jQuery.ajax = function (options) {
    let path
    if (arguments.length === 1) {
        // 传进一个参数时
        path = options.path
    } else if (arguments.length === 2) {
        // 传进两个参数时
        path = arguments[0]
        options = arguments[1]
    }
    let method = options.method
    let successFn = options.successFn
    let failFn = options.failFn
    let data = options.data
    let headers = options.header
    let r = new XMLHttpRequest()
    r.open(method, path)
    for (let key in headers){
        r.setRequestHeader(key, headers[key])
    }
    r.onreadystatechange = function () {
        if (r.readyState === 4) {
            if (r.status >= 200 || r.status < 300) {
                successFn.call(undefined, r.responseText)
            } else {
                failFn.call(undefined, r.request)
            }
        }
    }
    r.send(data)
}

用一个对象传参进去，在使用的时候就不用关注各个参数的顺序了，而且根据需要可以添加更多参数
使用方法：这里用一下豆瓣的API，进入https://api.douban.com，打开控制台，输入

$.ajax({
    path: 'https://api.douban.com/v2/book/1220562',
    method: 'GET',
    successFn: function (response) { console.log(response) },
    failFn: function (request) { console.log(request) },
    data:'0000'
})

得到的响应如下：

image.png

说明请求成功了

搞一个Promise版的ajax

如果需要在回调函数执行后再执行另外的函数，就再回调successFn里面再增加函数就行，但是当增加的函数过多时，会变得不可读，因为搞不清楚这些函数哪些会被执行，promise解决了这个问题
Promise相当于只在原来的基础上加了六个单词

return new Promise(function(resolve, reject){
......
}

但是它可以递归的加回调函数，避免因回调函数太多而产生回调地狱
代码如下：

window.jQuery = function (nodeOrSelector) {
    // 代码
}
window.$ = window.jQuery
window.jQuery.ajax = function ({path, method, data, headers }) {
    return new Promise(function (resolve, reject) {

        let r = new XMLHttpRequest()
        r.open(method, path)
        for (let key in headers) {
            r.setRequestHeader(key, headers[key])
        }
        r.onreadystatechange = function () {
            if (r.readyState === 4) {
                if (r.status >= 200 || r.status < 300) {
                    resolve.call(undefined, r.responseText)
                } else {
                    reject.call(undefined, r.request)
                }
            }
        }
        r.send(data)
    }
    )
}

这里传进function的参数是一个对象的形式，采用了解构赋值的写法，和之前的一大堆是一样的

使用方法如下：

$.ajax({
    path: 'https://api.douban.com/v2/book/1220562',
    method: 'GET',
    data: '0000'
}).then((text) => { console.log('text', text) },
    (request) => { console.log('request', request) })

如果想成功或者失败后在执行某些功能，可以在后面再接then()就可以了。

image.png

这是返回的结果，说明请求是对的，而且成功的接受了返回的数据