在日常業(yè)務(wù)開(kāi)發(fā)中，總會(huì)遇到這種場(chǎng)景，有一串請(qǐng)求，下一個(gè)請(qǐng)求依賴上一個(gè)異步請(qǐng)求的結(jié)果，一般來(lái)說(shuō)，我在處理這種需求的時(shí)候使用 async/await 。但是在某些情況（比如面試），可能需要提供更加高級(jí)的解決方案。

通常解法

async/await 串型請(qǐng)求

// 生成異步請(qǐng)求函數(shù)
/* 
@param {boolean} isSuccess 是否成功
@param {number} delay 請(qǐng)求返回時(shí)間
@return {Promise} promise 
*/
function genAsyncTask(isSuccess, delay) {
  return (params) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        isSuccess ? resolve(params || 'success') : reject('error')
      }, delay)
    })
  }
}
// 異步請(qǐng)求
const asyncTask1 = genAsyncTask(true, 1000)
const asyncTask2 = genAsyncTask(true, 2000)
const asyncTask3 = genAsyncTask(true, 3000)


// 通常解法
;(async()=>{
let result1 = await asyncTask1('a')
let result2 = await asyncTask2(result1)
await asyncTask3(result2)
// ...
})()

for...of 解法

不依賴上次結(jié)果，只要求順序執(zhí)行時(shí)，注意和Promise.all()區(qū)別

const asyncTasks = [asyncTask3, asyncTask2, asyncTask1]
;(async()=>{
  for(task of asyncTasks){
    console.log(await task())
  }
})()
// 輸出：success    3s之后
// 輸出：success    再2s之后
// 輸出：success    再1s之后

需求一

實(shí)現(xiàn) queuePromsies 方法
入?yún)楫惒秸?qǐng)求函數(shù)數(shù)組
上個(gè)結(jié)果作為下個(gè)異步函數(shù)的入?yún)?/li>

reduce 實(shí)現(xiàn)

/* reduce 
@param {array} promises 異步請(qǐng)求函數(shù)數(shù)組 note: 傳入異步函數(shù)，它返回 promise。而不是傳入 promise 對(duì)象。 
@initInput (any) initInput 初始參數(shù)，作為 reduce 初始值參數(shù)
*/

function queuePromises(asyncTasks, initInput = 'initInput') {
  return asyncTasks.reduce(
    (preAsyncTask, curAsyncTask) =>
      preAsyncTask.then((result) => {
        return curAsyncTask(result)
      }),
    Promise.resolve(initInput)
  )
}

/* 測(cè)試用例 */

;(async () => {
  try {
    let result = await queuePromises([asyncTask1, asyncTask2, asyncTask3])
    console.log(result)
  } catch (error) {
    console.log('error', error)
  }
})()
// 輸出：initInput

需求二

實(shí)現(xiàn) chainPromise 函數(shù)
不使用 async / await 語(yǔ)法
實(shí)現(xiàn)單個(gè) promise 失敗后重新執(zhí)行的配置，即 promise 失敗后允許繼續(xù)嘗試發(fā)送幾次請(qǐng)求，重傳次數(shù)用完則認(rèn)為失敗，進(jìn)入 catch

遞歸實(shí)現(xiàn)

// 遞歸解法
function chainPromise(tasks, { limit } = { limit: 3 }) {
  const results = []
  let tryTimes = 1
  let index = 0

  function next() {
    const task = tasks[index]
    if (task) {
      return task().then(
        (result) => {
          tryTimes = 1
          index++
          results.push(result)
          return next()
        },
        (reason) => {
          if (tryTimes <= limit) {
            console.log('try!!!', tryTimes)
            tryTimes++
            return next()
          } else {
            throw new Error('limit more than 3')
          }
        }
      )
    } else {
      return Promise.resolve(results)
    }
  }
  return next()
}
chainPromise([asyncTask1, asyncTask2, asyncTask3]), {limit:3}]).then(console.log)
// [1000,2000,3000]

到此這篇關(guān)于JS 中實(shí)現(xiàn)一個(gè)串型異步函數(shù)隊(duì)列的文章就介紹到這了,更多相關(guān)JS串型異步函數(shù)隊(duì)列內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: