使用 Promises 在 React 中链接 HTTP 请求

介绍

几乎可以肯定的是，作为任何现代 React 应用程序的开发人员，您将需要发出依赖于先前请求的响应的 HTTP 请求。也许您的应用程序需要在请求用户的帐户信息后请求交易列表。在这种情况下，您需要将这些 HTTP 请求链接在一起，以便它们一个接一个地发生。在现代 JavaScript 中，您可以使用 Promises 轻松链接 HTTP 请求。在本指南中，您将学习如何使用原始、Promise 语法和新的 async/await 关键字来链接 HTTP 请求。

让我们开始吧！

使用 Promises 链接请求

基于上一个示例，假设您正在创建一个 React 组件，需要显示给定帐户的一批交易。由于 API 的结构，您必须至少发出两个 HTTP 请求才能完成此功能。首先，您必须请求帐户，然后您必须使用响应中的批处理 ID 来请求您需要在 UI 中显示的交易。

您可以使用 Fetch 和 Promise API 轻松完成此功能。以下代码是一个示例，说明如何使用 Promise 链式语法编写连续 HTTP 请求的代码。

      reqAccountAndTransactions = () => {
    const accountInfoReq = fetch(`http://localhost:3000/api/account/${accountId}`).then(res => res.json())

    accountInfoReq.then(accountInfo => {
        // We can now store account info state on this component
        return fetch(`http://localhost:3000/api/transaction/${accountInfo.transactionBatchId}`)
    })
    .then(res => res.json())
    .then(transactions => {
        // Here we can use our transaction data
    })
    .catch(reqErr => console.error(reqErr))
    ...
}
    

就这样！在上面的代码中，首先，您使用 Fetch 创建帐户信息请求，以确保在使用 Fetch API 时调用返回响应中可用的.json()函数。请注意，由于此代码是异步的，因此在您开始请求交易之前不会完全执行。因此，您可以获取此accountInfoReq变量（即 Promise），并将其与新的交易请求链接在一起。您可以看到如何使用底层accountInfo数据来构建新的交易请求。

这就是 Promise 链的强大之处。通过将 Promise 链在一起，您不仅可以保证一个 Promise 会在它之前的其他 Promise 完成后立即完成，而且您还可以仅使用一个.catch来捕获所有请求中可能发生的任何错误。这非常强大，是避免可怕的嵌套代码的好方法。

这很棒，但是在下一节中，您将看到如何简化上述代码以使其更具可读性。

使用 Async/Await 链接请求

随着新语言功能的出现，JavaScript 已成为任何开发人员工具箱中的强大语言。这些新语言功能之一就是 async/await。

您可以将 JavaScript 中的 async/await 语法视为 Promise API 之上的语法糖。通过使用 async/await，您可以以同步方式编写异步代码。这非常强大，因为众所周知异步代码难以阅读。能够以同步和命令式方式编写异步代码使您能够编写更易于维护且易于阅读的代码。下面您可以看到上面编写的相同代码，但重构为使用 async/await 语法。

      reqAccountAndTransactions = async () => {
    const accountInfo = await fetch(`http://localhost:3000/api/account/${accountId}`).then(res => res.json())
    // We can now store account info state on this component

    const transactions = await fetch(`http://localhost:3000/api/transaction/${accountInfo.transactionBatchId}`)
                                .then(res => res.json())
    // Here we can use our transaction data
    ...
}
    

哇，通过进行此更改，您的代码几乎减少了一半。如您所见，此代码更具可读性，并且实现了相同的功能。在底层，您仍在使用 Promise 链来实现所需的结果，但 async/await 为您抽象出了许多实现细节。强烈建议您在 React 应用中链接 HTTP 请求时尽可能使用 async/await 语法。

结论

Promises 可让您轻松地将异步操作链接在一起。这是大多数 React 应用中急需的功能，因此了解如何创建自己的 Promises 以及使用 async/await 语法将为您取得成功奠定基础。

如果你希望进一步扩展有关链接异步操作的方法的知识，请查看 RxJs库。RxJs 是一个可帮助你通过 Observable API 管理异步操作的库。

我希望本指南能让您在 React 应用中链接 HTTP 请求和其他异步操作时充满信心。要了解有关 Promises 的更多信息，请查看 Promise文档。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文