ES7 async/await 中的循环执行 async 函数的方案
JavaScript 中的异步编程一直是开发者的一个大问题。而 ES7 的 async/await 语法则能使异步编程变得更加容易。但当需要循环执行多个异步函数时，async/await 的语法并没有直接的支持。本文将介绍一些循环执行 async 函数的方案，以及它们的优缺点。
传统的循环方案
在 ES7 之前，我们使用传统的循环方法来循环执行多个异步函数。下面是一个通过传统循环执行异步函数的示例代码：
// javascriptcn.com 代码示例
function asyncFunc(i) {
return new Promise(resolve => setTimeout(() => resolve(i), 1000));
}
async function loop() {
for (let i = 0; i < 5; i++) {
const result = await asyncFunc(i);
console.log(result);
}
}
loop();基本思路是定义一个 async 函数，然后通过 for 循环调用异步函数。当异步函数执行完成后，将结果存储在变量中并打印出来。
相对而言，这种方法的代码相对简单，易于理解和维护。但是，在循环的执行过程中，我们不能在异步函数中进行操作。比如，在 for 循环中，i 并没有被声明成 let，所以在异步函数内部修改 i 的值没有效果。
递归方式
另一种方法是使用递归，下面是一个递归方式的示例代码：
// javascriptcn.com 代码示例
function asyncFunc(i) {
return new Promise(resolve => setTimeout(() => resolve(i), 1000));
}
async function loop(i) {
const result = await asyncFunc(i);
console.log(result);
if (i < 5) {
await loop(i + 1);
}
}
loop(0);在这个方法中，我们定义了一个名为 loop 的递归函数，该方法一次只调用一个异步函数。每次递归调用时，将 i 的值加一。
我们也可以使用 Promise.all() 方法来同时发起多个异步函数的调用，不过需要注意这种方法会并行调用异步函数，不会保证它们的执行顺序。下面是一个使用 Promise.all() 的示例代码：
// javascriptcn.com 代码示例
function asyncFunc(i) {
return new Promise(resolve => setTimeout(() => resolve(i), 1000));
}
async function loop() {
const promises = [];
for (let i = 0; i < 5; i++) {
promises.push(asyncFunc(i));
}
const results = await Promise.all(promises);
console.log(results);
}
loop();Promise.all() 方法接受一个数组作为参数，在这个数组中包含了需要调用的所有异步函数。接着，等待所有异步函数完成，结果存储在一个数组中。这种方法可以很方便地批量处理异步函数的结果，但需要注意它的执行顺序可能和代码中的顺序不同。
总结
当我们需要循环调用多个异步函数时，我们有很多可以选择的方法。传统的 for 循环可以很好地解决问题，但在异步环境中会出现一些问题。因此使用递归方法可以避免这种问题。
最后，我们也可以使用 Promise.all() 方法来同时调用多个异步函数。不过需要注意它们的执行顺序。在实际应用中，我们应该根据实际情况选择最适合的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c9ba37d4982a6eb60ed2d