場景
有a、b、c三個異步任務，要求必須先執行a，再執行b，最后執行c
且下一次任務必須要拿到上一次任務執行的結果，才能做操作
思路
我們需要實現一個隊列，將這些異步函數添加進隊列并且管理它們的執行，隊列具有First In First Out的特性，也就是先添加進去的會被先執行，接著才會執行下一個(注意跟棧作區別)
大家也可以類比一下jQuery的animate方法，添加多個動畫也會按順序執行
解決
模擬3個異步函數
// 異步函數a
var a = function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve('a')
}, 1000)
})
}
// 異步函數b
var b = function (data) {
return new Promise(function (resolve, reject) {
resolve(data + 'b')
})
}
// 異步函數c
var c = function (data) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(data + 'c')
}, 500)
})
}解決方法一(使用then鏈式操作)
特點：可以滿足需求，但是書寫比較繁瑣
代碼
//鏈式調用
a()
.then(function (data) {
return b(data)
})
.then(function (data) {
return c(data)
})
.then(function (data) {
console.log(data)// abc
})
方法二(構建隊列)
特點：封裝方法，可移植到別處使用
代碼
// 構建隊列
function queue(arr) {
var sequence = Promise.resolve()
arr.forEach(function (item) {
sequence = sequence.then(item)
})
return sequence
}
// 執行隊列
queue([a, b, c])
.then(data => {
console.log(data)// abc
})方法三(使用async、await構建隊列)
同方法二，只是顯得更高大上點
代碼
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也可以用來順序執行函數，但是可使用的場景非常有限，一般用來讀取文件信息，而以上給出的方法，不管你在異步函數中做了什么，只要函數最后返回了一個Promise對象，都可以使用
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
