在 React 中，我们常常需要从后端获取数据并在页面中渲染。这就需要进行异步请求。而正确地处理异步请求是很重要的，因为它涉及到用户体验、性能和代码的可维护性。在本篇文章中，我将分享如何在 React 中处理异步请求。
1. 使用 axios 进行请求
我们可以使用 axios 库进行请求。这个库提供了一个简单易用的 API，并且可以在浏览器和 Node.js 中使用。首先，我们需要在项目中安装 axios：
npm install axios
我们可以在组件的 componentDidMount 方法中发起请求，并将结果存放在组件状态中：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
--
-
----- ------------------- -
----- -------- - ----- -----------------------
--------------- ----- ------------- ---
-
-------- -
----- - ---- - - -----------
------ -
-----
-------------
------
--
-
-这里我们使用了 async/await，这种语法可以让代码更加简洁和易读。我们使用 await 等待 axios 发送请求并返回数据。然后将返回的数据设置为组件的状态，以便在 render 中使用。
2. 处理请求错误
当请求失败时，我们需要给用户一个友好的提示，并且记录错误以便后续维护。可以使用 try/catch 捕获请求错误并设置错误状态：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
------ -----
--
-
----- ------------------- -
--- -
----- -------- - ----- -----------------------
--------------- ----- ------------- ---
- ----- ------- -
---------------------
--------------- ------ ------- -- --- ----- ---
-
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -------------------
-
------ -
-----
-------------
------
--
-
-我们可以看到，在 catch 中，我们记录了错误，并将错误信息设置为组件状态的 error 属性。如果错误存在，我们就用一个提示性的 <div> 显示错误消息并停止渲染其余的内容。
3. 将状态提升到父组件中
当我们需要在多个组件中使用相同的数据时，将状态提升到公共祖先组件中是一个很好的做法。这可以避免在一个组件中重复相同的请求，同时让数据在多个组件之间共享。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- --------------- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
------ -----
--
-
----- ------------------- -
--- -
----- -------- - ----- -----------------------
--------------- ----- ------------- ---
- ----- ------- -
---------------------
--------------- ------ ------- -- --- ----- ---
-
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -------------------
-
------ -
-----
---------------- ----------- --
---------------- ----------- --
------
--
-
-
-------- ---------------------- -
------ -
-----
------------------- ----------------
------
--
-
-------- ---------------------- -
------ -
-----
------------------- ----------------
------
--
-在这个例子中，我们创建了一个 ParentComponent 父组件。这个组件在 componentDidMount 钩子中发起请求。并将数据和错误状态存储在自己的状态中。然后我们将数据状态作为 props 传递给两个子组件 ChildComponent1 和 ChildComponent2，以便它们可以使用相同的数据。
4. 使用缓存
在前端应用中，我们可能会访问同一个数据源多次。如果每次都发起请求，这将带来显著的性能问题。为了解决这个问题，我们可以通过缓存来避免多次访问。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- --------
----- -------------- ------- --------- -
------------------ -
-------------
---------- - -
----- -----
------ -----
--
---------- - --- ------
-
----- ------------------- -
----- -------- - -------
----- ---------- - -------------------------
-- ------------ -
--------------- ----- ---------- ---
-------
-
--- -
----- -------- - ----- -----------------------
-- ----- ----
------------------------ ---------------
--------------- ----- ------------- ---
- ----- ------- -
---------------------
--------------- ------ ------- -- --- ----- ---
-
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -------------------
-
-- ------- -
------ ----------------------
-
------ -
-----
-------------
------
--
-
-在这个例子中，我们使用了一个 Map 来缓存数据。在组件的 componentDidMount 钩子中，我们首先检查缓存中是否存在数据。如果存在，则使用缓存中的数据，并直接从此处返回。否则，我们发起一个新的请求，并将返回的数据存储在缓存中。这一技巧可以有效地提高应用的性能。
结论
在 React 中，正确地处理异步请求是很重要的。我们可以使用 axios 发起请求，使用 try/catch 处理错误，将状态提升到父组件中和使用缓存来提高性能。这些技巧可以帮助我们更好地管理代码，提高用户体验，并使代码更加易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703daa3d91dce0dc84cec2b