掌握JavaScript中的`async`和`await`：循环中的使用指南

引言

在JavaScript的异步编程中，async和await提供了一种更接近同步代码的写法，使得异步逻辑更加清晰易懂。然而，当它们与循环结合时，一些常见的陷阱和误区可能会出现。本文将通过代码示例，指导你如何在循环中正确使用async和await。

基础概念

什么是async和await？

• async：声明一个函数是异步的，允许在函数内部使用await。
• await：等待一个Promise的结果，只能在async函数内部使用。

循环中的async和await

普通for循环示例

async function processArray() {
  for (let i = 0; i < array.length; i++) {
    const result = await asyncOperation(array[i]); // 等待异步操作完成
    console.log(result);
  }
}

map使用async和await示例

错误用法

async function processAndMap() {
  const results = skills.map(async (item) => {
    return await getSkillPromise(item);
  });
  console.log(results); // 这里只会打印出Promise数组
}

正确用法

async function processAndMap() {
  const promises = skills.map(item => getSkillPromise(item));
  const results = await Promise.all(promises); // 等待所有Promise完成
  console.log(results);
}

filter使用async和await示例

错误用法

async function filterSkills() {
  const filtered = skills.filter(async (item) => {
    const isVueOrReact = ['vue', 'react'].includes(item);
    return await getSkillPromise(item); // 这里会导致所有项都返回true
  });
  console.log(filtered);
}

正确用法

async function filterSkills() {
  const filtered = skills.filter(item => ['vue', 'react'].includes(item));
  const results = await Promise.all(filtered.map(item => getSkillPromise(item)));
  console.log(results);
}

forEach使用async和await的替代方案

async function processSkills() {
  let results = [];
  for (const skill of skills) {
    const result = await getSkillPromise(skill);
    results.push(result);
  }
  console.log(results);
}

异步并行处理示例

async function processInParallel() {
  const tasks = skills.map(skill => getSkillPromise(skill));
  const results = await Promise.all(tasks); // 并行处理所有异步任务
  console.log(results);
}

错误处理示例

async function processWithCatch() {
  try {
    for (let i = 0; i < skills.length; i++) {
      const result = await getSkillPromise(skills[i]);
      console.log(result);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

实践中的建议

• 使用普通for循环来连续执行await调用。
• 不要在forEach中使用await，而是使用for...of循环。
• 在map中使用await时，确保使用Promise.all来等待所有异步操作完成。
• 在filter中避免使用await，先使用map处理，然后再应用filter。

结语

通过上述示例，我们可以看到async和await在JavaScript中的循环使用需要特别注意。正确使用这些工具可以大大提高代码的可读性和效率。希望本文能帮助你避免常见的错误，写出更加健壮的异步代码。