在前端开发中，我们经常需要向服务器发起请求来获取数据，而使用 fetch 这个 API 往往需要大量重复的代码。因此，出现了一些现代化的 HTTP 客户端库，用于简化请求的编写和管理。其中， fetchum-redux 是一个基于 Redux 的 HTTP 客户端库，它能让你更方便地处理请求和响应。
安装
首先，需要确保已经安装了 Redux。接下来，可以使用 npm 安装 fetchum-redux ：
npm install fetchum-redux
基本用法
首先，需要在 Redux store 中加入 fetchumMiddleware。这个 middleware 能够拦截到发起的请求，并将响应作为 action 发送到 reducer 中。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ----------------- - ---- ----------------
----- ------- - ------ - --- ------- -- -
------ ------------- -
---- ------------
------ ----------------- ------ ----------------
--------
------ ------
-
--
----- ----- - -------------------- ------------------------------------接下来，就可以通过调用 fetchum 函数来发起请求了。这个函数接受三个参数：
url：请求的 URL。options：请求的配置，包括请求方法、请求头、请求体等。returnType：响应的数据类型。
-- -------------------- ---- -------
----- ----------- - -
---------- -------
--------- ------
--
----- -------- - ----- -------------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------------------
-- --------fetchum 函数返回一个 Promise 对象，可以使用 await 关键字来等待响应的返回。
高级用法
fetchum-redux 还提供了许多高级用法，例如：
多个请求的并发执行
const responses = await Promise.all([
fetchum('/api/user/1'),
fetchum('/api/user/2'),
fetchum('/api/user/3'),
]);可以使用 Promise.all 函数来发起多个请求。
请求的取消
const request = fetchum('/api/user', { signal });
request.cancel();可以使用 AbortController 来取消请求。需要注意的是， AbortController 只在现代浏览器中可用。
请求的缓存
const response = await fetchum('/api/user', {}, 'json', 'cache-first');可以使用 cache-first 策略来启用请求的缓存。
更多高级用法可以查看官方文档。
总结
fetchum-redux 是一个非常实用的 HTTP 客户端库，它能够让我们更方便地处理请求和响应，在编写前端项目时可以大大提升开发效率。同时，它提供了许多高级用法，可以让你更好地应对不同的场景需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726381e8991b448e893b