如何在 React 中使用 Promise.all 来加速 API 请求

每当您创建 React 应用程序时，实际上都需要发出 API 请求。它们可能非常慢（例如 https://www.twilio.com ) 或超快 ( https://www.telize.com ）。如果您的应用程序在缓存前获取必要数据很复杂，您可能需要使用两个或更多 API 调用，即使使用快速 API，它可能仍然缓慢。在本文中，我们将创建一个环境以尽可能快地获取数据。

当我们第一次开始使用 Strapi 时猛龙队，我不得不开始考虑 API 请求的新方法。

  Strapi = 无头内容管理系统，基本上是可定制的内容 API

对页面上的内容（例如标题、副标题、正文、图像等）进行了调用，并且可能还有更多关于建议的博客文章、用户评论和其他内容的调用。在缓存之前，单个页面可能偶尔需要两到三个调用，这可能非常慢。

然后我的高级开发同事向我演示了如何使用 承诺.all() 以加快进程。

在此之前，我的 API 调用如下所示：

 ❌ 这种模式可能会很慢，它们会一个接一个地跑 const pageData = 等待 axios.get(...)  
 const blogPostsData = 等待 axios.get(...)  
 常量评论数据 = 等待 axios.get(...)

这 等待 关键字导致调用顺序运行而不是并行运行，这是此解决方案中的问题；整个过程需要 3 到 6 秒，API 调用需要 1 到 2 秒，这是一种糟糕的网络体验。

最好的选择是并行运行调用，这只需三个调用中最慢的一个即可完成。

就是这样 承诺.all 是为了

  使用 Promise.all() 您可以并行运行它们而无需等待 const [ pageData, blogPostsData, reviewsData ] = 等待 Promise.all([  
 axios.get(...),  
 axios.get(...),  
 axios.get(...)  
 ])

本质上，您必须在数组中声明数据变量，并将调用传递给 承诺.all() 的数组根据变量的顺序。

请注意，你不需要把 等待 在这种情况下的电话前面；如果你这样做了，调用将一个接一个地执行，从而消除了好处！

我希望你发现这对你寻找新的学习材料很有用。感谢您抽出时间来阅读！

☕️如果您从我的文章中理解了一些更好的东西，您可以通过请我喝咖啡来支持我： https://www.buymeacoffee.com/daanworks

订阅我的电子邮件列表，并在此处或上关注我推特如果你以后想读更多这样的故事

本文链接：https://www.qanswer.top/15598/20430510