背景
在日常业务开发中，总会遇到这种场景，有一串请求，下一个请求依赖上一个异步请求的结果，一般来说，我在处理这种需求的时候使用 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之后需求一
- 实现 queuePromsies 方法
- 入参为异步请求函数数组
- 上个结果作为下个异步函数的入参
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 失败后重新执行的配置，即 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串型异步函数队列内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！