本文详解 JavaScript 中实现串行异步请求队列的多种方案。从基础的 async/await 顺序执行，到利用 for...of 保证顺序但不依赖结果，重点介绍了使用 reduce 链式调用传递上下文的 queuePromises 方法，以及支持失败重试机制的递归实现 chainPromise。涵盖代码示例与核心逻辑解析。
背景
在日常业务开发中，经常会遇到一系列请求存在依赖关系的场景，即下一个请求需要依赖上一个异步请求返回的结果。通常情况下，我会使用 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之后需求一
- 实现 queuePromises 方法
- 入参为异步请求函数数组
- 将上一个函数的执行结果作为参数传递给下一个异步函数
使用 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需求二
- 实现 chainPromise 函数
- 不使用 async/await 语法糖
- 实现单个 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]至此，关于在 JS 中实现串行异步函数队列的文章介绍完毕。如需了解更多相关 JS 串行异步函数队列内容，可搜索本站以往文章或继续浏览后续相关文章。感谢大家的支持！