使用 Async/Await 和 Map 实现异步操作的正确姿势

本文旨在帮助开发者理解如何在 JavaScript 中正确使用 async/await 和 map 方法处理异步操作，避免因异步执行顺序导致的数据错乱问题。通过实例代码，我们将演示如何确保异步操作按照预期顺序执行，并最终得到正确的结果。

在 JavaScript 中，map 方法常用于对数组中的每个元素执行相同的操作，并返回一个新的数组。当涉及到异步操作时，例如从数据库查询数据，直接在 map 方法中使用 async/await 可能会导致一些意想不到的问题，比如执行顺序错乱。

问题分析

问题的核心在于 Promise.all 结合 map 使用时，虽然 Promise.all 会等待所有 Promise 对象完成，但默认情况下，map 内部的异步操作是并发执行的，并非按照数组的原始顺序。这意味着，即使 array1 数组的顺序是确定的，但由于 SQL 查询完成的时间不同，investment.push() 的顺序也可能被打乱。

解决方案

要解决这个问题，关键在于确保 map 方法中的异步操作返回的是 Promise 对象，并且将每个 Promise 对象的结果按照原始数组的顺序收集起来。

正确的做法是：在 map 方法的回调函数中，return 异步操作的结果。这样，Promise.all 接收到的就是一个由 Promise 对象组成的数组，它会按照原始数组的顺序，收集每个 Promise 对象的结果，并最终返回一个包含所有结果的数组。

示例代码

let investment = await Promise.all(array1.map(async (value) => {   const sqlQuery = `sql query goes here`;   console.log("test");    const data = await sequelize.query(sqlQuery);   const sqlData = data[0][0];    return sqlData.amount; }));  console.log("investment", investment);

代码解释

1. array1.map(async (value) => { … }): 使用 map 方法遍历 array1 数组，并为每个元素执行一个异步操作。async 关键字表明回调函数是一个异步函数。
2. const data = await sequelize.query(sqlQuery);: 使用 await 关键字等待 SQL 查询完成，并将结果赋值给 data 变量。
3. return sqlData.amount;: 关键的一步，将异步操作的结果（sqlData.amount）返回。这会将每个异步操作封装成一个 Promise 对象。
4. Promise.all(…): Promise.all 接收一个由 Promise 对象组成的数组，并返回一个新的 Promise 对象。这个新的 Promise 对象会在所有 Promise 对象都完成时 resolve，并将所有 Promise 对象的结果按照原始数组的顺序组成一个数组。
5. let investment = await …: 使用 await 关键字等待 Promise.all 返回的 Promise 对象 resolve，并将结果（包含所有金额的数组）赋值给 investment 变量。

注意事项

• 确保你的环境支持 async/await 语法。
• 仔细检查 SQL 查询语句，确保其正确性和效率。
• 如果需要对查询结果进行更复杂的操作，可以在 map 方法的回调函数中进行处理。

总结

通过正确使用 async/await 和 map 方法，我们可以有效地处理异步操作，并确保结果按照预期顺序返回。关键在于理解 map 方法的返回值，以及 Promise.all 的工作原理。在处理异步操作时，务必注意执行顺序，并采取相应的措施来保证数据的正确性。