什么是 react-inital-request
react-inital-request 是一款可以帮助前端开发者轻松发起异步请求的工具。它可以在 React 组件装载时发起请求，在请求结束前显示一个 loading 动画，在请求完成后显示请求得到的数据。
如何使用 react-inital-request
安装
我们可以通过 npm 来安装 react-inital-request，使用以下命令：
npm install react-initial-request --save
导入
在你的 React 组件代码中引入 react-inital-request：
import InitialRequest from 'react-initial-request';
使用
在需要发起请求的组件中使用 InitialRequest 组件，传入以下几个 props：
fetchData：一个异步函数，接收一个回调函数作为参数，用于在请求结束后把得到的数据传给 InitialRequest 组件；renderLoading：一个用于加载动画的组件；renderError：一个用于渲染请求失败情况的组件；renderSuccess：一个用于渲染请求成功时的组件。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
--------- - ----- ---------- -- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
---------------
-
-------- -
------ -
---------------
--------------------------
----------------- -- ----------------------
--------------- -- -------------- ---- -------------
--------------------- -- -
-----
---------------------
------------------
------
--
--
-
-
-这个例子中，我们在组件 MyComponent 中传入了一个 fetchData 函数，它会在请求的数据到来时调用 InitialRequest 中的回调函数，将得到的数据传入 InitialRequest 组件。利用 renderLoading、renderError 和 renderSuccess，我们可以根据请求的状态，展示不同的组件。
示例代码
以下是一个更加完整的例子，可以帮助你更好地了解 react-inital-request 的使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- ------------------------
----- ----------- ------- --------------- -
----- - -
------ -----
-
--------- - ----- ---------- -- -
--- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
---------------
- ----- --- -
--------------- ------ --------- ---
-
-
-------- -
----- - ----- - - -----------
------ -
-----
---------------
--------------------------
----------------- -- ----------------------
--------------- -- -------------- ---- -------------
--------------------- -- -
-----
---------------------
------------------
------
--
--
------ -- ------------------ --------------
------
--
-
-在这个例子中，我们首先在初始化时设置一个状态 error，以便在请求失败时显示错误信息。fetchData 函数中我们加入了 try-catch 语句，以处理请求失败的情况。同时我们将 error 信息显示在组件底部。
总的来说，react-inital-request 可以有效地减少复杂异步请求情况下的代码冗余，使得我们在处理异步请求时更加专注于业务逻辑的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e8381e8991b448e74ce