前言
在开发前端应用时，我们经常需要调用后端 API 来获取数据。而调用 API 需要处理异步请求，包括发送请求、等待响应、处理结果等等一系列操作。为了方便管理异步请求，我们可以使用 Redux 的 middleware，在 Redux 数据流中添加一层中间件来处理异步请求。
redux-routed-api-middleware 是一个基于 Redux 中间件的 npm 包，它可以根据请求路径来自动处理异步请求，使得代码更加简洁和易于维护。本篇文章将详细介绍如何使用这个 npm 包。
安装和基本使用
使用 npm 安装 redux-routed-api-middleware：
npm install redux-routed-api-middleware --save
然后在 Redux store 中添加 middleware：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - ------------------- - ---- ------------------------------ ------ ----------- ---- ------------- ----- ------------- - ---------------------- ----- ----- - ------------ ------------ ------------------------------ --
在 Redux store 中添加后，redux-routed-api-middleware 会自动解析 action 中的请求路径，并自动发起异步请求。例如一个 Redux action 可以设置为：
-- -------------------- ---- -------
-
----- -------------
-------- -
------- ------
----- ------------
---------- ------ -- -- ----- --------------------- -------- - ---- - ---
---------- ------- -- -- ----- --------------------- -------- - ----- - --
-
-在这个 action 中，path 属性指定了要调用的 API 路径，onSuccess 和 onFailure 分别是成功和失败时的回调函数。当这个 action 被分发时，redux-routed-api-middleware 会自动发起一个 GET 请求到 /api/data 地址，并在请求成功或失败后分别调用 onSuccess 和 onFailure 函数。
高级用法
redux-routed-api-middleware 提供了一些高级用法，可以使得代码更加简洁和易于维护。下面将介绍几个常用的高级用法。
替换默认配置
默认情况下，redux-routed-api-middleware 发起的请求采用 axios 库发送。如果你想使用其他的请求库，可以通过替换默认配置实现。例如使用 fetch 库可以这样写：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - -------------------- ------------- - ---- ------------------------------ ------ ----------- ---- ------------- ----- ------------- - --------------------- ----------------- ------ ------------ --- ----- ----- - ------------ ------------ ------------------------------ --
在这个例子中，我们用 window.fetch 替换了默认的 axios 实现。这样，在 redux-routed-api-middleware 发起请求时就会调用 window.fetch 函数。
全局配置
有些情况下，我们需要为所有的异步请求添加一些通用的参数，例如请求 headers 或者 baseURL。在 redux-routed-api-middleware 中可以通过全局配置实现。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------------------- ------------- - ---- ------------------------------
------ ----------- ---- -------------
----- ------------- - ---------------------
-----------------
-------- ----------------------
-------- -
-------------- ------- ---------
-
---
----- ----- - ------------
------------
------------------------------
--在这个例子中，我们设置了 baseURL 和 headers 两个全局配置，在所有的异步请求中都会自动添加这两个选项。如果某个请求需要覆盖这些配置，则可以在请求的 payload 对象中设置相应的选项。
使用响应拦截器
有些情况下，我们需要在请求成功后对响应进行一些处理，例如过滤一些敏感信息或者转换格式等等。在 redux-routed-api-middleware 中可以通过响应拦截器来实现这个功能。
响应拦截器是一个函数，它接收一个包含请求结果的响应对象，返回一个经过处理后的新的响应对象。例如：
-- -------------------- ---- -------
----- ------------------- - ---------- -- -
-- --------------------- --- ---------- -
------ -
------------
----- --------------------
--
- ---- -
------ -
------------
----- -----
------ --- ----------------------------
-
-
-
----- ------------- - ---------------------
-------------------
---在这个例子中，我们定义了一个 responseInterceptor 函数，它会检查响应的 status 属性，如果 status 为 success，就把 result 赋值给 data 属性，并返回新的响应对象。如果 status 不为 success，就返回一个包含 error 属性的新的响应对象。
使用请求拦截器
有些情况下，我们需要在请求发送前对请求进行一些处理，例如添加签名或者设置超时时间等等。在 redux-routed-api-middleware 中可以通过请求拦截器来实现这个功能。
请求拦截器是一个函数，它接收一个包含请求参数的对象，返回一个经过处理后的新的请求参数对象。例如：
-- -------------------- ---- -------
----- ------------------ - -------- -- -
----- --------- - --- -----------------
-------------- - -
------------------
-------------- ---------
--
------ -------
-
----- ------------- - ---------------------
------------------
---在这个例子中，我们定义了一个 requestInterceptor 函数，它会在请求头中添加 X-Timestamp 属性，并返回新的请求参数对象。
实例
下面是一个使用 redux-routed-api-middleware 的实例，它调用了一个名为 getProducts 的 API，获取商品信息并更新 Redux store 中的数据：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ------------------------------
------ ----------- ---- -------------
----- ------------- - ----------------------
----- ----- - ------------
------------
------------------------------
--
----- ------------- - -------- -- --
----- -----------------
-------- -
------- ------
----- ----------------
-------
---------- ------ -- -- ----- ------------------------- -------- - ---- - ---
---------- ------- -- -- ----- ------------------------- -------- - ----- - ---
-
---
------------------------------ --------- ------- ----在这个例子中，我们定义了一个 fetchProducts 函数，它返回一个 action，包含了调用 getProducts API 的相关信息。当这个 action 被分发时，redux-routed-api-middleware 会自动发起一个 GET 请求到 /api/products 地址，并在请求成功或失败后分别调用 onSuccess 和 onFailure 函数，然后更新 Redux store 中的数据。
结论
通过使用 redux-routed-api-middleware，我们可以更加方便地管理异步请求，使得代码更加简洁和易于维护。本篇文章介绍了 redux-routed-api-middleware 的基本用法和一些高级用法，通过应用这些技巧，我们可以在开发前端应用时更加高效和愉悦。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc281e8991b448dd1ac