快捷導(dǎo)航

詳解如何構(gòu)建Promise隊(duì)列實(shí)現(xiàn)異步函數(shù)順序執(zhí)行

更新時(shí)間：2018年10月23日 08:41:54 作者：vcxiaohan2

這篇文章主要介紹了詳解如何構(gòu)建Promise隊(duì)列實(shí)現(xiàn)異步函數(shù)順序執(zhí)行，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

場(chǎng)景

有a、b、c三個(gè)異步任務(wù)，要求必須先執(zhí)行a，再執(zhí)行b，最后執(zhí)行c

且下一次任務(wù)必須要拿到上一次任務(wù)執(zhí)行的結(jié)果，才能做操作

思路

我們需要實(shí)現(xiàn)一個(gè)隊(duì)列，將這些異步函數(shù)添加進(jìn)隊(duì)列并且管理它們的執(zhí)行，隊(duì)列具有First In First Out的特性，也就是先添加進(jìn)去的會(huì)被先執(zhí)行，接著才會(huì)執(zhí)行下一個(gè)(注意跟棧作區(qū)別)

大家也可以類(lèi)比一下jQuery的animate方法，添加多個(gè)動(dòng)畫(huà)也會(huì)按順序執(zhí)行

解決

模擬3個(gè)異步函數(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)：可以滿(mǎn)足需求，但是書(shū)寫(xiě)比較繁瑣

代碼

//鏈?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
 })

順便說(shuō)一句，bluebird的Promise.reduce也可以用來(lái)順序執(zhí)行函數(shù)，但是可使用的場(chǎng)景非常有限，一般用來(lái)讀取文件信息，而以上給出的方法，不管你在異步函數(shù)中做了什么，只要函數(shù)最后返回了一個(gè)Promise對(duì)象，都可以使用

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: