Promise的進(jìn)階版終極方案

現(xiàn)在大家所用的瀏覽器可謂除了常見的還有不常見的，總體來說是很多，但是
隨著現(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非常好用，但它也不是適合所有的場(chǎng)景，最常見的就是有些場(chǎng)景是需要串行的，一個(gè)任務(wù)列表要按順序依次循環(huán)執(zhí)行，任意一個(gè)失敗就不觸發(fā)下面的任務(wù)。那要實(shí)現(xiàn)這樣的功能能怎么寫呢？

最簡(jiǎ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ù)處理不定長(zhǎng)度的數(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)沒有嵌套看起來瞬間舒服多了~

作者：黑馬程序員大數(shù)據(jù)培訓(xùn)學(xué)院
首發(fā)：http://web.itheima.com/