背景
最近在项目时,需要封装AJAX请求实现请求,查阅了一些资料,最后确定使用promise来封装
promise
- es6新出来的对象,用于实现和封装异步操作很方便
- promise正好有resolve和reject方法对应成功和失败的请求
- promise不管成功还是失败都会有一个结果,方便处理请求失败的回调
实现
function ajax(url) {
return new Promise(function (resolve, reject) {
var req = new XMLHttpRequest(); //创建ajax的实例
req.open('GET', URL, true);//打开一个get请求,并且是异步
req.onload = function () {
if (req.status === 200) {
resolve(req.responseText);
} else {
reject(new Error(req.statusText));
}
};//返回readyState 状态码为4时候调用
req.onerror = function () {
reject(new Error(req.statusText));
};
req.send(); //发送请求
});
}
调用
window.callAPI=function(){
console.log('开始调用api获取数据')
var url = "https://localhost:5001/blog/test"; //本机的测试api,根据自己情况来修改
ajax(url).then(function onFulfilled(value){
document.write('数据为:' + value);
}).catch(function onRejected(error){
document.write('错误:' + error);
});
}
github地址代码:点击这里