在前端开发中，请求后端数据是必不可少的一项工作。redux-promise-axios 是一个非常方便的 npm 包，可以帮助我们更加简单地处理异步请求。
安装
可以使用 npm 进行安装：
npm install redux-promise-axios --save
基础使用
redux-promise-axios 实际是对 axios 进行了一层封装，使其支持 Promise。
我们在 redux 中的使用方式类似于这样：
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-axios';
const store = createStore(
reducer,
applyMiddleware(promiseMiddleware),
);在我们的 Action 中，我们可以简单地传入一个 Promise：
export const fetchUser = () => ({
type: 'FETCH_USER',
payload: axios.get('/api/user'),
});在 reducer 中，我们可以通过判断 action 中 type 的方式，处理返回结果：
-- -------------------- ---- -------
----- ------- - ------- ------- -- -
------ ------------- -
---- ---------------------
-- -------
------ - --------- -------- ---- --
---- -----------------------
-- ------
------ - --------- ----- -------------------- -------- ----- --
---- ----------------------
-- ------
------ - --------- ------ ----------------------- -------- ----- --
--------
------ ------
-
-高级使用
可以通过配置来对 redux-promise-axios 进行更加大量的定制。
设置请求前缀
可以通过配置来设置请求的前缀，例如：
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
----- ---------------- - -
----------------------------- -----
------------- -
-------- --
-------- ---------- ------- -- -
---------- - --------------------------------
------ -------
-
--
-
--
------------
--------
----------------------------------------------------
--处理请求失败
可以通过配置 returnRejectedPromiseOnError 选项来实现对请求失败的处理。
-- -------------------- ---- ------- ------ ----------------- ---- ---------------------- ----- ---------------- - - ----------------------------- ----- -- ------------ -------- ---------------------------------------------------- --
这里值得特别注意的是，如果你希望使用 returnRejectedPromiseOnError 来处理请求失败，那么在 reducer 中对于错误的处理，需要给出一个默认的返回值，例如：
-- -------------------- ---- -------
----- ------- - ------- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- -------- ---- --
---- -----------------------
------ - --------- ----- -------------------- -------- ----- --
---- ----------------------
------ - --------- ------ ----------------------- -------- ----- --
--------
-- -------------
------ ------
-
-设置请求拦截器
可以通过配置来设置请求拦截器，例如：
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
----- ---------------- - -
------------- -
-------- --
-------- -------- -- -
----------------------------------- - ------- -----------------------
------ -------
-
--
-
--
------------
--------
----------------------------------------------------
--我们可以在请求 interceptor 中做一些事情，例如设置请求头，对请求的数据进行处理等等。
设置响应拦截器
可以通过配置来设置响应拦截器，例如：
-- -------------------- ---- -------
------ ----------------- ---- ----------------------
----- ---------------- - -
------------- -
--------- --
-------- ---------- --------- -- -
-- ------------------- --- ---- -
-- -----
------ -------------------------
- ---- -
------ ---------
-
--
------ ---------- ------ -- -
-- ---------------------- --- ---- -
-- -----
------ ----------------------
- ---- -
------ ----------------------
-
--
-
--
------------
--------
----------------------------------------------------
--响应拦截器拦截到响应之后，我们可以根据返回结果来做进一步处理，例如未授权的处理、错误处理等等。
示例代码
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----------------- ---- ----------------------
------ ----- ---- --------
----- ---------------- - -
----------------------------- -----
------------- -
-------- --
-------- ---------- ------- -- -
---------- - --------------------------------
----------------------------------- - ------- -----------------------
------ -------
-
--
--------- --
-------- ---------- --------- -- -
-- ------------------- --- ---- -
-- -----
------ -------------------------
- ---- -
------ ---------
-
--
------ ---------- ------ -- -
-- ---------------------- --- ---- -
-- -----
------ ----------------------
- ---- -
------ ----------------------
-
--
-
--
----- ----- - ------------
--------
-----------------------------------------------------
--
------ ----- --------- - -- -- --
----- -------------
-------- -----------------------
---
----- ------- - ------- ------- -- -
------ ------------- -
---- ---------------------
------ - --------- -------- ---- --
---- -----------------------
------ - --------- ----- -------------------- -------- ----- --
---- ----------------------
------ - --------- ------ ----------------------- -------- ----- --
--------
------ ------
-
-以上就是对 redux-promise-axios 的使用教程，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d21