場景
有a、b、c三個異步任務(wù),要求必須先執(zhí)行a,再執(zhí)行b,最后執(zhí)行c
且下一次任務(wù)必須要拿到上一次任務(wù)執(zhí)行的結(jié)果,才能做操作
思路
我們需要實(shí)現(xiàn)一個隊(duì)列,將這些異步函數(shù)添加進(jìn)隊(duì)列并且管理它們的執(zhí)行,隊(duì)列具有First In First Out的特性,也就是先添加進(jìn)去的會被先執(zhí)行,接著才會執(zhí)行下一個(注意跟棧作區(qū)別)
大家也可以類比一下jQuery的animate方法,添加多個動畫也會按順序執(zhí)行
解決
模擬3個異步函數(shù)
// 異步函數(shù)a var a = function () { return new Promise(function (resolve, reject) { setTimeout(function () { resolve('a') }, 1000) }) } // 異步函數(shù)b var b = function (data) { return new Promise(function (resolve, reject) { resolve(data + 'b') }) } // 異步函數(shù)c var c = function (data) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(data + 'c') }, 500) }) }
解決方法一(使用then鏈?zhǔn)讲僮?
特點(diǎn):可以滿足需求,但是書寫比較繁瑣
代碼
//鏈?zhǔn)秸{(diào)用 a() .then(function (data) { return b(data) }) .then(function (data) { return c(data) }) .then(function (data) { console.log(data)// abc })
方法二(構(gòu)建隊(duì)列)
特點(diǎn):封裝方法,可移植到別處使用
代碼
// 構(gòu)建隊(duì)列 function queue(arr) { var sequence = Promise.resolve() arr.forEach(function (item) { sequence = sequence.then(item) }) return sequence } // 執(zhí)行隊(duì)列 queue([a, b, c]) .then(data => { console.log(data)// abc })
方法三(使用async、await構(gòu)建隊(duì)列)
同方法二,只是顯得更高大上點(diǎn)
代碼
async function queue(arr) { let res = null for (let promise of arr) { res = await promise(res) } return await res } queue([a, b, c]) .then(data => { console.log(data)// abc })
順便說一句,bluebird的Promise.reduce也可以用來順序執(zhí)行函數(shù),但是可使用的場景非常有限,一般用來讀取文件信息,而以上給出的方法,不管你在異步函數(shù)中做了什么,只要函數(shù)最后返回了一個Promise對象,都可以使用
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com