隨著現(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)景，最常見(jiàn)的就是有些場(chǎng)景是需要串行的，一個(gè)任務(wù)列表要按順序依次循環(huán)執(zhí)行，任意一個(gè)失敗就不觸發(fā)下面的任務(wù)。那要實(shí)現(xiàn)這樣的功能能怎么寫(xiě)呢？

最簡(jiǎn)單的就是一個(gè)個(gè)寫(xiě)

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’)})

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

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)});

老師不給力啊，理解起來(lái)就很繞，還要在閉包外面定義result存數(shù)據(jù)，用上reduce也覺(jué)得有點(diǎn)奇技淫巧，不太美觀啊，能不能寫(xiě)得更好看點(diǎn)啊。 可以！說(shuō)起異步方案，Promise是很強(qiáng)，但它還不是最強(qiáng)的，還有Promise的進(jìn)階版 —— async/await！號(hào)稱JS異步的終極解決方案，真不是蓋的，下面就來(lái)看看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)解決串行異步問(wèn)題，沒(méi)有回調(diào)沒(méi)有嵌套看起來(lái)瞬間舒服多了~