用promise封装ajax_使用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*/

functionajax(optionsOverride) {//将传入的参数与默认设置合并

var options ={};for (var k inajaxOptions) {

options[k]= optionsOverride[k] ||ajaxOptions[k];

}

options.async= options.async === false ? false : true;var xhr = options.xhr = options.xhr || newXMLHttpRequest();return new Promise(function(resolve, reject) {

xhr.open(options.method, options.url, options.async);

xhr.timeout=options.timeout;//设置请求头

for (var k inoptions.headers) {

xhr.setRuquestHeader(k, options.headers[k]);

}//注册xhr对象事件

xhr.onprogress =options.onprogress;

xhr.upload.οnprοgress=options.onuploadprogress;

xhr.responseType=options.dataType;

xhr.οnabοrt= function() {

reject(newError({

errorType:'abort_error',

xhr: xhr

}));

}

xhr.ontimeout= function() {

reject({

errorType:'timeout_error',

xhr: xhr

});

}

xhr.οnerrοr= function() {

reject({

errorType:'onerror',

xhr: xhr

})

}

xhr.onloadend= function() {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304)

resolve(xhr);elsereject({

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