使用 async 和 await 控制 JS 循环的正确方式

前端

2023-12-16 11:00:26

在 JavaScript 中，使用 async 和 await 可以让你以更优雅的方式编写异步代码，本文将探讨在循环中使用 async 和 await 的正确方式，并通过一个实例来说明如何在循环中使用 async 和 await。

理解 async 和 await

在深入探讨循环中的 async 和 await 用法之前，我们先回顾一下 async 和 await 的基本概念。

async 函数 ：async 函数是一种特殊的函数，它允许你使用 await 暂停函数的执行，直到异步操作完成。

await 关键字 ：await 关键字用于暂停 async 函数的执行，直到异步操作完成。它只能在 async 函数中使用。

在循环中使用 async 和 await

在循环中使用 async 和 await 时，需要注意以下几点：

不要在循环中直接使用 await ：在循环中直接使用 await 会导致整个循环被阻塞，这可能会导致性能问题。
使用 Promise.all() 或 async/await ：为了避免在循环中直接使用 await 导致的性能问题，你可以使用 Promise.all() 或 async/await 来并行执行异步操作。
注意并发限制 ：在循环中使用 async/await 时，需要注意并发限制。如果并发操作过多，可能会导致系统资源耗尽。

实例：使用 async 和 await 在循环中获取水果数量

假设你想从水果篮中获取水果的数量。你想从fruitBasket获得每个水果的数量。要获取水果的数量，可以使用getNumFruit()函数。getNumFruit()函数是一个异步函数，它返回一个包含水果数量的 Promise 对象。

const fruitBasket = ['apple', 'banana', 'orange', 'grape'];

async function getNumFruit(fruit) {
  const response = await fetch(`https://api.example.com/fruits/${fruit}`);
  const data = await response.json();
  return data.numFruit;
}

async function main() {
  const numFruits = [];
  for (const fruit of fruitBasket) {
    const numFruit = await getNumFruit(fruit);
    numFruits.push(numFruit);
  }

  console.log(numFruits);
}

main();

在这个实例中，我们使用 async/await 来并行获取水果的数量。我们首先创建一个空数组numFruits来存储水果的数量。然后，我们使用for-of循环来遍历fruitBasket数组。在循环中，我们使用await getNumFruit(fruit)来获取每个水果的数量，并将结果存储在numFruits数组中。最后，我们使用console.log()函数来打印出numFruits数组。