Promise实战AJAX封装

一、利用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