React 是一个流行的 JavaScript 库，用于构建用户界面。它的组件化和声明式编程风格使得开发人员可以轻松地构建复杂的用户界面。在开发过程中，我们经常需要使用外部 API 接口来获取数据或执行操作。本文将介绍 React 中使用外部 API 接口的方法，包括如何发送请求、处理响应并将数据渲染到用户界面。
发送请求
在 React 中发送请求有多种方式，最常见的是使用 fetch() 方法。这种方法返回一个 Promise 对象，可以在响应返回后使用 .then() 方法来处理响应数据。以下是一个使用 fetch() 方法获取数据的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
-------------------------------------
-------------- -- ----------------
---------- -- ---------------
-- ----
------ -
-----
-------------- -- -
---- --------------
---------------------
-------------------------
------
---
------
--
-
------ ------- ----在上面的代码中，我们使用了 useState() 和 useEffect() 钩子来管理组件的状态和生命周期。在 useEffect() 钩子中，我们使用 fetch() 方法来发送请求，并在响应返回后使用 .then() 方法将数据保存到状态中。最后，我们通过 map() 方法将数据渲染到用户界面。
除了 fetch() 方法外，还有其他第三方库可以用于发送请求，如 axios、superagent 等。这些库提供了更多的功能和选项，如拦截器、取消请求等。
处理响应
在处理响应数据时，我们经常需要根据响应状态进行不同的操作。例如，如果响应状态码为 200，则表示请求成功，我们可以将数据保存到状态中并将其渲染到用户界面；如果响应状态码为 404，则表示请求的资源不存在，我们可以显示一个错误消息。
以下是一个处理响应数据的示例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------ -------- - -------------
----- ----------- ------------- - ----------------
----- ------- --------- - ---------------
------------ -- -
-------------------
-------------------------------------
-------------- -- -
-- -------------- -
----- --- ----------------
-
------ ----------------
--
---------- -- -
--------------
--------------------
--
------------ -- -
----------------
--------------------
---
-- ----
-- ----------- -
------ ----------------------
-
-- ------- -
------ ---------------------------
-
------ -
-----
-------------- -- -
---- --------------
---------------------
-------------------------
------
---
------
--
-
------ ------- ----在上面的代码中，我们使用了 useState() 钩子来管理组件的状态。在 useEffect() 钩子中，我们首先将 isLoading 状态设置为 true，以显示加载中的消息。然后使用 fetch() 方法发送请求，并在响应返回后检查响应状态码。如果响应状态码不是 200，则抛出一个错误。否则，我们将响应数据保存到状态中，并将 isLoading 状态设置为 false，以显示数据。
最后，我们使用条件语句来检查 isLoading 和 error 状态，并根据它们的值显示不同的消息或数据。
结论
在本文中，我们介绍了 React 中使用外部 API 接口的方法，包括如何发送请求、处理响应并将数据渲染到用户界面。我们还提供了示例代码，并讨论了一些常见的问题和注意事项。希望这篇文章能够帮助你在 React 应用程序中使用外部 API 接口。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d29b3e1dcc5c0fa397b64