简介
@hhjcz/redux-rest 是一个基于 Redux 构建的 REST API 请求框架，它可以帮助前端开发者轻松地处理与后端 API 的交互。此框架集成了常见的请求方法（GET, POST, PUT, DELETE, PATCH），并提供了一些辅助函数，使开发者可以更方便、快速地完成 API 相关开发工作。
本教程将详细地介绍该 npm 包的使用方法，及如何将其应用到实际的项目中。
安装
使用 npm 或 yarn 可以很方便地安装该包：
npm install @hhjcz/redux-rest
或者
yarn add @hhjcz/redux-rest
使用方法
先在项目中引入 redux 和 redux-thunk，并创建一个 store，这样我们可以将 @hhjcz/redux-rest 集成至 Redux 平台。
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));接下来，将 @hhjcz/redux-rest 中提供的 Reducer 和 Middleware 添加至我们的 rootReducer 和 store 中。
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - ---------- -- --------------- ------- -- ----------- - ---- -------------------- ----- ----------- - ----------------- ----- ------------ -- ---- ----- -------- ---- --- ----- ----- - ------------ ------------ ---------------------- ---------------- --
现在我们已经集成了 @hhjcz/redux-rest，接下来就可以使用它了。
基本用法
@hhjcz/redux-rest 提供了 5 个请求方法：get, post, put, delete, patch，它们分别对应着 HTTP 请求中的 GET、POST、PUT、DELETE 和 PATCH 方法。下面我们来看一个 GET 方法的示例：
-- -------------------- ---- -------
------ - --- - ---- ----------------------------
----- -------- ----------- -
--- -
----- ---- - ----- -----------------------------------------------------
------------------
- ----- ------- -
---------------------
-
-此代码通过调用 get 方法从 https://api.example.com/users 路径获取数据，并将结果打印到终端中。在该示例中，我们使用了 async/await 语法来处理异步请求。
其他请求方法的使用方法与 get 类似，只需要将方法名改成对应的函数名即可（例如 post 代替 get）。
自定义请求
有时候 API 的格式可能并不是我们想要的，此时我们就需要对请求的格式进行自定义。@hhjcz/redux-rest 提供了 customize 方法来支持开发者自定义 API 返回的格式。下面我们来看一个示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------------------
-------- ----------------------- -
-- -- ---- ------ ------- ----
------ ---------
-
----- -------- ----------- -
--- -
----- ---- - ----- --------------------------
------- ------
---- --------------------------------
--------------
----
------------------
- ----- ------- -
---------------------
-
-此代码通过调用 customize 方法获取 https://api.example.com/users 路径返回的数据，并对数据进行了自定义的处理（在 parseResponse 函数中进行）。在这里，我们将自定义的解析函数传递给了 customize 方法。
注意，customize 方法中支持的所有参数与普通请求方法相同，只是多了一个 parseResponse 参数，你可以通过该参数自定义对 API 数据的解析。
错误处理
在与 API 进行交互时，难免会出现一些错误，例如 URL 错误、网络错误等，此时我们需要对这些错误进行处理。@hhjcz/redux-rest 提供了 RestError 错误类型，它可以帮助我们更好地处理错误。下面我们来看一个错误处理的示例：
-- -------------------- ---- -------
------ - --------- - ---- ----------------------------
----- -------- ----------- -
--- -
----- ---- - ----- -----------------------------------------------------
------------------
- ----- ------- -
-- ------ ---------- ---------- -
--------------------------- -------
- ---- -
---------------------- -------- -------
-
-
-在该示例中，我们通过 catch 捕获了请求可能出现的错误，然后根据错误类型进行了处理。对于 RestError 类型，我们直接将错误信息打印到终端中；对于其他类型的错误，我们通过 console.error 方法进行了输出。
总结
本教程介绍了 @hhjcz/redux-rest 的基本用法，并详细讲解了如何使用自定义请求和处理错误。通过学习本教程，你可以更好地掌握 @hhjcz/redux-rest 的使用方法，并在实际开发中更加高效地处理与 API 交互的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bb8967216659e2440f1