隨著現(xiàn)代瀏覽器的不斷發(fā)展，相信大家漸漸對(duì)ES6中的Promise已經(jīng)有很多的使用了，其中對(duì)Promise.all估計(jì)也用的很多。Promise.all就是并行執(zhí)行多個(gè)任務(wù)，然后在所有任務(wù)成功后觸發(fā)then里面的內(nèi)容，或者任意一個(gè)任務(wù)失敗后觸發(fā)catch里面的內(nèi)容。

雖然Promise.all非常好用，但它也不是適合所有的場景，最常見的就是有些場景是需要串行的，一個(gè)任務(wù)列表要按順序依次循環(huán)執(zhí)行，任意一個(gè)失敗就不觸發(fā)下面的任務(wù)。那要實(shí)現(xiàn)這樣的功能能怎么寫呢？

最簡單的就是一個(gè)個(gè)寫

var a = ()=>{return new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
});}

var b = ()=>{return new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
});}

var c = ()=>{return new Promise((resolve, reject) => {
    setTimeout(resolve, 1000);
});}

a().then(()=>{
    return b()
}).then(()=>{
    return c()
}).then(()=>{
    console.log('after 3 sec')
})

這樣寫。。。真的好挫，更重要的是，有時(shí)候需要批量處理一個(gè)任務(wù)，都是調(diào)用同一個(gè)函數(shù)處理不定長度的數(shù)據(jù)，這樣寫肯定就不行了，比如要串行請(qǐng)求一串url。首先想到的是一個(gè)比較繞的方法，搞個(gè)Promise鏈出來，把下一個(gè)任務(wù)作為參數(shù)傳到前一個(gè)的then中，如此循環(huán)。這種同一個(gè)函數(shù)不斷循環(huán)然后把前一個(gè)處理完的值又傳到參數(shù)里面，剛好和Array.reduce的思想是一致的，所以可以這么寫：

var urlArr = ['http://www.qq.com','http://www.qq.com','http://www.qq.com'];

function makaPromiseList(dataArr,handler) {
    return dataArr.reduce((promise, obj) => {
        return promise.then((ret) => {
            return handler(obj);
        })
    }, Promise.resolve())
}

var result = [];
function makeRequest(url){
    return new Promise((resolve,reject)=>{
        $.get(url).success((ret)=>{
            result.push(ret)
            resolve(result)
        }).fail(()=>{
            reject()
        })
    })
}

makaPromiseList(urlArr,makeRequest).then((result)=>{
    console.log(result)
});

老師不給力啊，理解起來就很繞，還要在閉包外面定義result存數(shù)據(jù)，用上reduce也覺得有點(diǎn)奇技淫巧，不太美觀啊，能不能寫得更好看點(diǎn)啊。 
可以！說起異步方案，Promise是很強(qiáng)，但它還不是最強(qiáng)的，還有Promise的進(jìn)階版 —— async/await！號(hào)稱JS異步的終極解決方案，真不是蓋的，下面就來看看async/await的方案

var urlArr = ['http://www.qq.com','http://www.qq.com','http://www.qq.com'];

function makeRequest(url){
    return new Promise((resolve,reject)=>{
        $.get(url).success((ret)=>{
            resolve(ret)
        }).fail(()=>{
            reject()
        })
    })
}

async function makaPromiseList(dataArr,handler){
    var result = [];
    for(let item of dataArr){
        var ret = await handler(item);
        result.push(ret);
    }
    return result;
}
makaPromiseList(urlArr,makeRequest).then((ret)=>{
    console.log(ret)
});

一個(gè)for循環(huán)解決串行異步問題，沒有回調(diào)沒有嵌套看起來瞬間舒服多了~

標(biāo)簽：

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。