掌握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);}
}