使用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)) })