在 JS 中实现一个串型异步函数队列

·  阅读 164
在 JS 中实现一个串型异步函数队列

背景

在日常业务开发中,总会遇到这种场景,有一串请求,下一个请求依赖上一个异步请求的结果,一般来说,我在处理这种需求的时候使用 async/await 。但是在某些情况(比如面试),可能需要提供更加高级的解决方案。

通常解法

async/await 串型请求

// 生成异步请求函数
/* 
@param {boolean} isSuccess 是否成功
@param {number} delay 请求返回时间
@return {Promise} promise 
*/
function genAsyncTask(isSuccess, delay) {
  return (params) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        isSuccess ? resolve(params || 'success') : reject('error')
      }, delay)
    })
  }
}

// 异步请求
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 解法

不依赖上次结果,只要求顺序执行时,注意和Promise.all()区别

const asyncTasks = [asyncTask3, asyncTask2, asyncTask1]

;(async()=>{
  for(task of asyncTasks){
    console.log(await task())
  }
})()
// 输出:success    3s之后
// 输出:success    再2s之后
// 输出:success    再1s之后

复制代码

需求一

  1. 实现 queuePromsies 方法
  2. 入参为异步请求函数数组
  3. 上个结果作为下个异步函数的入参

reduce 实现

/* reduce 
@param {array} promises 异步请求函数数组 note: 传入异步函数,它返回 promise。而不是传入 promise 对象。 
@initInput (any) initInput 初始参数,作为 reduce 初始值参数
*/

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



/* 测试用例 */

;(async () => {
  try {
    let result = await queuePromises([asyncTask1, asyncTask2, asyncTask3])
    console.log(result)
  } catch (error) {
    console.log('error', error)
  }
})()
// 输出:initInput
复制代码

需求二

  1. 实现 chainPromise 函数
  2. 不使用 async / await 语法
  3. 实现单个 promise 失败后重新执行的配置,即 promise 失败后允许继续尝试发送几次请求,重传次数用完则认为失败,进入 catch

递归实现

// 递归解法
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]

复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改