React 中 Array.Map 的 Async/Await 关键字
介绍
众所周知，异步代码很难理解和调试。各种语言都有不同的结构来帮助管理这种复杂性。长期以来，使用 JavaScript 管理异步代码的唯一方法是使用回调。回调是异步代码运行完成后“回调”（执行）的函数。这种技术的问题在于，它会导致嵌套不良的异步代码，很难推理！“回调地狱”是在此期间创造的一个术语。
随着 JavaScript 的发展，为了更好地推理异步代码并提供“可执行”结构来执行长时间运行的操作，承诺被添加到了该语言中。但是，承诺仍然涉及某种形式的函数嵌套，有时可能比回调更难推理（取决于手头的问题）。async/await 语法是解决此问题的方法。通过在承诺之上提供一种“语法糖”，async和await关键字使异步代码看起来像同步代码！使用这些关键字可以帮助大大简化您的代码。
在本指南中，我们将专门讨论如何使用 async/await 语法以及JavaScript 中所有数组都可用的Array.map函数。您将学习如何仅使用纯 JavaScript 轻松地并行执行许多异步代码。
让我们开始吧！
Async/Await 概述
async/await 关键字是一种在计算机程序中建模异步控制流的绝妙机制。在 JavaScript 中，这些关键字是承诺之上的“语法糖”——它们抽象出您需要对Promise.then进行的任何调用。在下面的代码中，您可以看到 React 组件中异步函数的示例：
...
executeLongRunningTask = async () => {
const response = await fetch(this.taskUrl);
return await response.json();
}
...
上面的代码从 API 中获取了一些 JSON。您可以看到函数声明前面使用了async关键字。这使您可以使用await关键字同步解决函数内的承诺。当您使用await关键字时，可以保证函数的执行将暂停，直到await完成解决您的承诺。
现在您已经看到并理解了如何使用 async/await 语法，让我们看看如何将它与Array.map一起使用来组成许多长时间运行的任务。
使用 Array.map 的异步函数
Array.map是 Array 原型层次结构中可用的函数。这实际上意味着任何 JavaScript 数组都可以访问map函数。此函数接收一个函数作为参数，并为数组中的每个项目调用给定的函数，返回迭代的每个项目的值。它的强大之处在于，您可以将Array.map与异步函数一起使用以生成承诺数组！这意味着您可以迭代数组中的项目并以简洁易读的方式为每个项目返回承诺。在下面的代码中，您可以看到更新后的函数，它组成了许多长时间运行的任务。
...
private taskUrls = [taskOneUrl, taskTwoUrl, taskThreeUrl];
executeLongRunningTask = async (url) => {
return await fetch(url).then(response => response.json());
}
executeAllLongRunningTasks = async () => {
return await Promise.all(taskUrls.map(this.executeLongRunningtask);
}
...
如您所见，在上面的代码中，executeLongRunningTask异步函数被传递到map调用中，该调用映射任务 URL 列表。对于每个 URL，都会返回一个承诺。在此迭代结束时，会生成一个承诺数组。这允许使用Promise.all，它会尝试并行解析数组中的每个承诺，并在数组中的所有承诺完成时自行解析。
您现在可以使用此executeAllLongRunningTasks函数将新解析的任务响应数组记录到控制台，如下所示：
...
this.executeAllLongRunningTasks().then(console.log);
...
或者，如果您想在异步函数或顶级异步模块中使用它：
...
const tasks = await this.executeAllLongRunningTasks();
console.log(tasks);
...
结论
async/await 关键字是推理异步代码的极其强大的手段。使用它们将使您的代码更具可读性，从而更易于维护。当将 async/await 与Array.map一起使用时，您将拥有一种强大的手段来按顺序或并行执行许多异步函数。
现在，您可以放心使用Array.map编写异步函数！有关更多信息，请查看async/await 语法的文档。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~