在前端开发中，我们经常会用到 Ajax 请求去获取后台数据或者与后端通信，然而这个过程往往比较繁琐，需要处理很多细节，而且还要考虑错误处理、数据缓存等问题。为了简化这个过程，我们可以使用 npm 包 react-axios-hoc。
安装和基本使用
首先我们需要安装 react-axios-hoc，可以使用 npm 或 yarn，如下所示：
npm i react-axios-hoc --save
安装完成后，在需要使用的组件中引入：
import withAxios from 'react-axios-hoc';
然后我们就可以将这个高阶函数用于我们需要发送异步请求的组件上，例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- - ----- -------- ------ ----- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
----
-------------- -- -
--- ------------------------------
---
-----
------- --------------------- -------------
------
--
-
-
------ ------- -------------- -
---- ---------------------------------------------
------- ------
---我们可以看到，我们在组件中使用了 withAxios 函数，他接收两个参数，第一个参数是一个需要渲染的 React 组件，第二个参数是一个对象，包含了发送请求的必要信息，这里包含了一个 URL 和 HTTP 方法。
这个函数返回的是一个新的组件，这个组件包含了一些状态，例如 loading 和 error，以及 fetch 函数用于发送请求。我们可以在渲染这个组件时直接使用这些状态和函数。
参数配置
withAxios 函数还接受一些其他的参数配置，可以将其传递给请求库 axios，例如我们可以设置 headers、超时时间等。
例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- - ----- -------- ------ ----- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
----
-------------- -- -
--- ------------------------------
---
-----
------- --------------------- -------------
------
--
-
-
------ ------- -------------- -
---- ---------------------------------------------
------- ------
-------- -
------------------- -----------------
--
-------- -----
---响应数据处理
通常情况下，我们需要对请求返回的数据进行一些处理，例如将数据进行处理、添加一些其他信息等操作。为此，我们可以将一个回调函数作为第三个参数传递给 withAxios 函数。这个回调函数会接收整个响应对象，我们可以在这个函数中进行数据处理，并返回需要的数据。
例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- - ----- -------- ------ ----- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
----
-------------- -- -
--- ------------------------------
---
-----
------- --------------------- -------------
------
--
-
-
------ ------- ----------
----
-
---- ---------------------------------------------
------- ------
--
-------- -- -------------- -- -------
--请求缓存
有时候我们需要缓存一些请求返回的数据，以便在后续使用时直接从缓存中读取，而不是重新发送请求。对于这种需求，我们可以给 withAxios 函数传递第四个参数，它是一个用于存储缓存数据的对象。
例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
----- - ----- -------- ------ ----- - - -----------
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
----
-------------- -- -
--- ------------------------------
---
-----
------- --------------------- -------------
------
--
-
-
----- ----- - ---
------ ------- ----------
----
-
---- ---------------------------------------------
------- ------
--
-------- -- -------------- -- -------
------
--总结
使用 react-axios-hoc 可以大大简化我们在 React 中进行异步请求的流程。它处理了很多请求过程中需要处理的细节，例如错误处理、请求缓存等。我们只需要关注如何利用这个高阶函数来实现我们的组件功能即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d0927023822396