一、利用Promise的知识,对最开始的ajax的例子进行一个简单的封装:
var url = 'xxx';
// 封装一个get请求的方法
function request(url){return new Promise(function(resolve,reject){var XHR = new XMLHttpRequest();XHR.open('GET',url,true);XHR.send();XHR.onreadystatechange = function(){if(XHR.readyState==4 && XHR.status == 200){try{var response = JSON.parse(XHR.responseText);resolve(response)} catch(e){reject(e);}}else{reject(new Error(XHR.statusText))}}})}request(url).then(function(res){console.log(res);
})
二、当有一个ajax请求,它的参数需要另外2个甚至更多请求都有返回结果之后才能确定,这个时候,就需要用到Promise.all
Promise.all接收一个Promise对象组成的数组作为参数,当这个数组所有的Promise对象状态都变成resolved或者rejected的时候,它才会去调用then方法。
url1 = "xxx1"
url2 = "xxx2"function renderAll(){return Promise.all([request(url1),request(url2)])
}renderAll().then(function(value){console.log(value);
})
三、Promise.race
Promise.race是以一个Promise对象组成的数组作为参数,不同的是,只要当数组中的其中一个Promsie状态变成resolved或者rejected时,就可以调用.then方法了
function renderRace() {return Promise.race([getJSON(url), getJSON(url1)]);
}renderRace().then(function(value) {console.log(value);
})
欢迎加入大前端交流群!群号:277942610,新建立VIP新群
更多专业前端知识,请上 【猿2048】www.mk2048.com