实现AJAX以及Promise

JS 操作请求与响应

• 客户端的JS发起请求（浏览器上的）
  使用 XMLHttpRequest 的 setRequestHeader 修改请求头的第二部分
  使用 send 修改请求头第四部分
  使用 getAllResponseHeaders 获取全部的响应头
  使用 getResponseHeader 获取响应头第二部分
  使用 statusText 获取到响应状态是否 OK
  使用 responseText 获取响应头第四部分

  AJAX 设置请求
  第一部分 request.open(‘get’, ‘/xxx’);
  第二部分 request.setHeader(‘ContentType’, ‘x-www-form-urlencodeed’);
  第四部分 request.send(‘a=1&b=2’);

  AJAX 设置响应
  第一部分 request.status / request.statusText
  第二部分 request.getResponseHeader() / request.getAllResponseHeaders()
  第四部分 request.responseText

• 服务端的JS发送响应（Node.js上的）
  待续

自己实现 jQuery.ajax

就是对 ajax 的封装,代码如下

window.jQuery.ajax = function(url, method, body, success, fail) {
    let request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = function() {
        if (request.readyState === 4) {
            if (request.status >= 200 && request.status < 300) {
                // 成功就打印出响应
                success.call(undefined, request.responseText);
            } else if (request.status >= 400) {
                // 失败就打印出 request
                fail.call(undefined, request);
            }
        }
    }
    // body 为消息实体,即为 HTTP 请求的第 4 部分
    request.send(body);
}

// 重命名
window.$ = window.jQuery;

// 定义成功回调函数
function success(responseText) {
    console.log(responseText);
}
function fail(request) {
    console.log(request);
}

ES 6 语法之解构赋值

比如有这样的赋值

let method = options.method
let body = options.body
let successFn = options.successFn
let failFn = options.failFn
let headers = options.headers

在 ES 6 中是这样赋值的

// 析构赋值
let {method, body, successFn, failFn, headers} = options

跟 python 一些语法有点像
又例如

// ES5
f = function(a) {
    console.log(a);
}
// ES6
f2 = (a)=> {
    console.log(a);
}

// ES5
var x = '???';
var o = {};
o[x] = true; // '???' as key

// ES6
var x = '???';
var o = {
    [x]: true // [x] is '???'
}

promise

一个确定函数形式的 规范

function success(responseText) {
    console.log(responseText);
}
function fail(request) {
    console.log(request);
}

myButton.addEventListener('click', (e)=> {
    $.ajax({
        url: '/frank',
        method: 'get'
    }).then(success, fail); // 成功调用 success , 失败调用 fail
})

这样一来就不用管成功或者是失败用的函数名是什么了

myButton.addEventListener('click', (e)=> {
    $.ajax({
        url: '/frank',
        method: 'get'
    }).then(
            (responseText)=> {
                console.log(responseText);
                return responseText;
            },
            (request)=> {
                console.log(request);
                return request;
            }
    ).then(
        (上一次的处理结果)=> {
            console.log(上一次的处理结果);
        },
        (request)=> {
            console.log(request);
        }
    );
})

以上就是对同一个状态进行多次处理

在自己写的 ajax 里面添加

window.jQuery.ajax = function({url, method, body, headers}) {
    return new Promise(function(resolve, reject) {
        //... ajax 逻辑代码
        let request = new XMLHttpRequest();
        request.open(method, url);
        for (let key in headers) {
            let value = headers[key];
            request.setRequestHeader(value);
        }
        request.onreadystatechange = ()=> {
            if (request.readyState === 4) {
                if (request.status >= 200 && request.status < 300) {
                    // 注意这里用的是 resovle
                    resolve.call(undefined, request.responseText);
                } else if (request.status >= 400) {
                    // 注意这里用的是 reject
                    reject.call(undefined, request);
                }
            }
        }
        request.send(body);
    })
}

这是 window 下的一个全局属性叫 Promise
那么如何调用呢

myButton.addEventListener('click', (e)=> {
    window.jQuery.ajax({
        url: '/frank',
        method: 'get',
        headers: {
            'Content-Type:', 'application/x-www-form-urlencoded',
            'frank': '18'
        }
    }).then(
        (text)=> {console.log(text);}, // 成功调用
        (request)=> {console.log(request);} // 失败调用
    );
});

而 Promise 的源码大致是这样的

window.Promise = function(fn) {
    ...
    return {
        then: function() {}
    }
}

注意，假设有这样的一个 Promise 对象 xxx,在调用 then 的时候出现以下情况

xxx()
    .then(
        fn1, fn2
    )
    .then(
        fn3, fn4
    )

fn3 是在 fn1 以及 fn2 都没有问题的情况下调用
fn4 是在 fn1 或者 fn2 有问题的情况下调用