问答题617/1593如何顺序执行10个异步任务?

难度:
2022-08-07 创建

参考答案:

解法1:for 循环 + await

简单的 for 循环是依次进行循环的,不像 Array.forEach,Array.map 方法是并发执行的,利用这一特点加 async / await 很容易写出下面这样的代码:

1(async () => { 2 const sleep = delay => { 3 return new Promise((resolve, reject) => { 4 setTimeout(_ => resolve(), delay) 5 }) 6 } 7 8 const task = (i) => { 9 return new Promise(async (resolve, reject) => { 10 await sleep(500) 11 console.log(`now is ${i}`) 12 ++i 13 resolve(i) 14 }) 15 } 16 17 let param = 0 18 for (let i = 0; i < 4; i++) { 19 param = await task(param) 20 } 21})()

输出:

now is 0
now is 1
now is 2
now is 3

解法2:Array.prototype.reduce

关于 Array.prototype.reduce 方法相信大部分小伙伴初见时都是用来数组求和。

reduce有初始值积累值,以及当前值的概念。其中 积累值可以看作是前一个值,通过返回积累值又可以看作是 下一个值。使用reduce来解决问题的代码为:

1const sleep = delay => { 2 return new Promise((resolve, reject) => { 3 setTimeout(_ => resolve(), delay) 4 }) 5} 6 7const task = (i) => { 8 return new Promise(async (resolve, reject) => { 9 await sleep(500) 10 console.log(`now is ${i}`) 11 ++i 12 resolve(i) 13 }) 14} 15 16[task, task, task, task].reduce(async (prev, task) => { 17 const res = await prev 18 return task(res) 19}, 0)

输出:

now is 0
now is 1
now is 2
now is 3

可以这样理解 prevtask

  • prev:前一个 异步任务(promise)
  • task:当前的异步任务

当前的异步任务需要上一个异步任务的结果作参数,故很显然要 await prev。

最近更新时间:2024-08-10

赞赏支持

预览

题库维护不易,您的支持就是我们最大的动力!