您现在的位置:首页 >> 前端 >> 内容

用Promise实现两个Ajax有序进行(代码教程)

时间:2018/3/26 11:35:50 点击:

  核心提示:作为前端面试中一道高命中率的题,啥也不说直接上代码:var getJSON = function(url,callback){var promise = new Promise(function (r...

作为前端面试中一道高命中率的题,啥也不说直接上代码:

var getJSON = function(url,callback){
var promise = new Promise(function (resolve,reject) {
var client = new XMLHttpRequest();
client.open("GET",url);
client.onreadystatechange = handler;//readyState属性的值由一个值变为另一个值时,都会触发readystatechange事件
client.responseType = "json";
client.setRequestHeader("Accept","application/json");
client.send();

function handler(){
if(this.readyState !== 4){
return;
}
if(this.status === 200){
callback(this.response);
resolve(this.response);
}else{
reject(new Error(this.statusText))
}
};
});
return promise;
};

getJSON("./e2e-tests/get.json",function(resp){
console.log("get:" + resp.name);
}).then(function (json) {
getJSON("./e2e-tests/get2.json",function(resp){
console.log("get2:" + resp.name);
})
}).catch(function (error) {
console.log("error1:"+error);
})

主要思想就是运用Promise中的then方法。

另注:getJSON函数里面的url是相对于当前html页面的相对路径。

Tags:用P PR RO OM 
作者:网络 来源:前端小渣