前言
在前端开发的过程中，我们需要与后端进行数据交互，这就需要用到 ajax。redux-ajaxable 是一个能够帮助我们更便捷地进行数据交互的 npm 包。本文将介绍 redux-ajaxable 的使用方法。
运行环境
- Node.js 6+
- npm
安装
在项目根目录下使用 npm 安装 redux-ajaxable：
npm install redux-ajaxable --save
基本用法
在使用 redux-ajaxable 之前，我们需要将其连接到 Redux 的 store 中。我们可以通过以下代码来实现这一操作：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - -------------- - ---- ----------------- -- --------------- ---- ----- -------- - -------------------- ----- ----- - ------------ --------- ------------------------------- --
在连接后，我们就可以在 Redux 的 action creator 中使用 redux-ajaxable 提供的语法糖来进行数据请求了。以下代码是一个例子：
import { createAction } from 'redux-actions';
export const fetchPost = createAction('FETCH_POST', (id) => ({
url: `/posts/${id}`,
method: 'GET'
}));在上述代码中，createAction 函数的第一个参数是 action 的 type，第二个参数是一个函数，该函数用于返回一个对象，其中包含 url 和 method 等属性。由于 redux-ajaxable 中已经提供了中间件，因此我们无需手动调用 ajax，我们只需要将该 action creator 作为一个普通的 Redux action creator 进行 dispatch，redux-ajaxable 将会帮我们自动完成 ajax 请求以及结果的处理。
高级用法
除了上述基本用法外，redux-ajaxable 还提供了许多详细的配置选项来满足我们更为细致的需求。以下是一些常用的配置：
request
request 是一个函数，它接受 creator 中定义的参数，并返回一个新的请求配置。例如：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ ----- --------- - -------------------------- ---- -- --
---- ---------------
------- ------
-------- -------- -- -
------------------------------- - ------- ----------------
------ -------
-
----在上述代码中，我们使用了一个名为 request 的配置项，并在其中添加了请求头 Authorization，以匹配我们的需求。
response
response 是一个函数，它用于对响应进行处理，可以在返回前修改数据或者处理响应错误。例如：
import { createAction } from 'redux-actions';
export const fetchPost = createAction('FETCH_POST', (id) => ({
url: `/posts/${id}`,
method: 'GET',
response: (response) => ({ data: response })
}));在上述代码中，我们使用了一个名为 response 的配置项，并在其中对 response 进行了二次包装。
verbose
verbose 是一个 boolean 值，代表着是否打印请求的信息。默认情况下，它是关闭的。例如：
import { createAction } from 'redux-actions';
export const fetchPost = createAction('FETCH_POST', (id) => ({
url: `/posts/${id}`,
method: 'GET',
verbose: true
}));在上述代码中，我们设置了一个名为 verbose 的配置项，并将其设置为 true，在发出请求时，它将打印请求的信息。
示例代码
接下来是一些使用 redux-ajaxable 的示例代码：
-- -------------------- ---- ------- ------ - ------------ - ---- ---------------- -- -- --- -- ------ ----- --------- - -------------------------- ---- -- -- ---- --------------- ------- ----- ---- -- -- ---- -- ------ ----- ---------- - --------------------------- ------ -- -- ---- --------- ------- ------- ---- ---- -- -- --- -- ------ ----- ---------- - --------------------------- ---- ----- -- -- ---- --------------- ------- ------ ---- ---- -- -- ------ -- ------ ----- ---------- - --------------------------- ---- -- -- ---- --------------- ------- -------- ----
总结
redux-ajaxable 是一个能够简化数据请求以及响应处理的 npm 包。它拥有许多优秀的特性，比如：良好的文档、简洁的语法、可扩展的中间件等等。在实际项目中，redux-ajaxable 可以为我们节省大量的开发时间以及提供更加优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66c9