場景

有a、b、c三個異步任務，要求必須先執行a，再執行b，最后執行c

且下一次任務必須要拿到上一次任務執行的結果，才能做操作

思路

我們需要實現一個隊列，將這些異步函數添加進隊列并且管理它們的執行，隊列具有First In First Out的特性，也就是先添加進去的會被先執行，接著才會執行下一個(注意跟棧作區別)

大家也可以類比一下jQuery的animate方法，添加多個動畫也會按順序執行

解決

模擬3個異步函數

// 異步函數avar a = function () { return new Promise(function (resolve, reject) {  setTimeout(function () {   resolve('a')  }, 1000) })}// 異步函數bvar b = function (data) { return new Promise(function (resolve, reject) {  resolve(data + 'b') })}// 異步函數cvar 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對象，都可以使用

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。