使用promise手动封装ajax函数

最近在做一个单页应用，node和浏览器仅通过json传输数据，因为是只有自己用等于是锻炼一下自己，所以也不用考虑seo的问题，node端我已经写好了，但是浏览器端想要用ajax原生太麻烦，用封装的函数又需要引入angular,jquery等大型框架。我写node比较多，觉得用什么功能就引入什么功能，不太喜欢用大而全的框架，所以只好手动封装一下ajax的操作

ajax的xhr对象有7个事件

onloadstart 开始send触发

onprogress 从服务器上下载数据每50ms触发一次

onload 得到响应

onerror 服务器异常

onloadend 请求结束，无论成功失败

onreadystatechange xhr.readyState改变使触发

onabort 调用xhr.abort时触发

关于ajax，我找到了一篇很好的文章，这里就不再赘述：https://segmentfault.com/a/1190000004322487

本来我是想注册onload和onerror简单封装一下，后来发现即使后台返回500也依旧会触发onload事件，

所以最终我的选择是注册onloadend事件，通过判断xhr.status来决定是引发resolve还是reject，同时

对于xhr对象还注册ontimeout,onabort,onerror函数，并在reject时返回一个对象，包含errorType和xhr，

返回xhr的原因在于使用这个函数时可能使用xhr对象的一些其他参数，resolve也是返回这个

代码如下：

// ajax函数的默认参数
var ajaxOptions = {
    url: '#',
    method: 'GET',
    async: true,
    timeout: 0,
    data: null,
    dataType: 'text',
    headers: {},
    onprogress: function () { },
    onuploadprogress: function () { },
    xhr: null
}

/**
 * ajax函数，返回一个promise对象
 * @param {Object} optionsOverride 参数设置，支持的参数如下
 *   url:                     url地址，默认"#"
 *   method:                  请求方法，仅支持GET,POST,默认GET
 *   async:                   是否异步，默认true
 *   timeout:                 请求时限，超时将在promise中调用reject函数
 *   data:                    发送的数据，该函数不支持处理数据，将会直接发送
 *   dataType:                接受的数据的类型，默认为text
 *   headers:                 一个对象，包含请求头信息
 *   onprogress:              处理onprogress的函数
 *   ouploadprogress:         处理.upload.onprogress的函数
 *   xhr:                     允许在函数外部创建xhr对象传入，但必须不能是使用过的
 * @return {Promise} 
 *   该函数注册xhr.onloadend回调函数，判断xhr.status是否属于 [200,300)&&304 ，
 *   如果属于则promise引发resolve状态，允许拿到xhr对象
 *   如果不属于，或已经引发了ontimeout,onabort,则引发reject状态，允许拿到xhr对象
 * 
 * 关于reject
 *   返回一个对象，包含
 *   errorType:错误类型，
 *     abort_error:   xhr对象调用abort函数
 *     timeout_error: 请求超时
 *     onerror:       xhr对象触发了onerror事件
 *     send_error:    发送请求出现错误
 *     status_error:  响应状态不属于 [200,300)&&304
 */
function ajax(optionsOverride) {
    // 将传入的参数与默认设置合并
    var options = {};
    for (var k in ajaxOptions) {
        options[k] = optionsOverride[k] || ajaxOptions[k];
    }
    options.async = options.async === false ? false : true;
    var xhr = options.xhr = options.xhr || new XMLHttpRequest();

    return new Promise(function (resolve, reject) {
        xhr.open(options.method, options.url, options.async);
        xhr.timeout = options.timeout;

        //设置请求头
        for (var k in options.headers) {
            xhr.setRuquestHeader(k, options.headers[k]);
        }

        // 注册xhr对象事件
        xhr.onprogress = options.onprogress;
        xhr.upload.onprogress = options.onuploadprogress;
        xhr.responseType = options.dataType;

        xhr.onabort = function () {
            reject(new Error({
                errorType: 'abort_error',
                xhr: xhr
            }));
        }
        xhr.ontimeout = function () {
            reject({
                errorType: 'timeout_error',
                xhr: xhr
            });
        }
        xhr.onerror = function () {
            reject({
                errorType: 'onerror',
                xhr: xhr
            })
        }
        xhr.onloadend = function () {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)
                resolve(xhr);
            else
                reject({
                    errorType: 'status_error',
                    xhr: xhr
                })
        }

        try {
            xhr.send(options.data);
        }
        catch (e) {
            reject({
                errorType: 'send_error',
                error: e
            });
        }
    })
}

另外一点，关于参数我没有过多的检查，比如method是否为'GET'或'POST'，一个是在于参数检查很繁琐（尽情说我懒把），另外一个在于参数应该使用强制规范，在文档中标注，使用这个函数出错了你就应该自己负责，而不是我帮你检查后给你修改过来，这也不利于调用者理解这个函数。

使用代码如下：

ajax({
    url: 'http://localhost:3000/suc',
    async: true,
    onprogress: function (evt) {
        console.log(evt.position/evt.total);
    },
    dataType:'text/json'
})
    .then(function (xhr) { console.log(xhr.response.name); },
    function (e) { console.log(JSON.stringify(e)) })