在现代的 Web 应用中，前端的数据请求和处理变得越来越复杂。为了统一数据请求的处理方式，很多框架都提供了 Restful API 的支持。react-inject-restful 是一个基于 React 的 npm 包，可以帮助开发者更容易地实现 Restful API 的数据请求。
为什么要使用 react-inject-restful
使用 react-inject-restful 可以让前端开发者在使用 React 进行数据请求时更简单、更方便。使用 react-inject-restful 可以实现以下功能：
- 自动实现请求头的设置，包括自动设置 token。
- 结合 withLoading HOC，可以实现自动展示 loading。
- 支持全局错误处理，全局的 401 和 403 处理。
- 支持请求错误和返回错误时的拦截处理。
安装
使用 npm 安装 react-inject-restful：
npm i react-inject-restful
基本使用
使用 react-inject-restful 的基本流程是：
- 在 React 组件中使用 injectRestful 注入 Restful API 对象
- 在需要使用 Restful API 的地方，使用 withRestful HOC 修饰组件
- 在组件中使用 this.props.restful.get 等方法进行数据请求
在注入 Restful API 对象时，需要提供一个配置对象，配置对象包括以下内容：
- 请求地址
- 请求方法
- 请求参数
- 请求头信息
例如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ----------- - ---- -----------------------
----- -------------- ------- --------------- -
------------------- -
----- - ------- - - -----------
------------- --- --- -------------- -- -
--------------------
---
-
-------- -
------ --------------------------
-
-
----- ------------------------- - ----------------------------
------ ------- --------------
--------------------------
-
------- -- -- -------------------
------- -----
-
--上面的代码中，定义了一个 RestfulExample 组件，注入了一个 Restful API 对象。使用 withRestful 修饰组件后，就可以使用 restful 对象的方法进行数据请求。
请求参数
在使用 react-inject-restful 进行数据请求时，可以传递请求参数。请求参数分为两种，一种是以 query 参数的形式传递，一种是以 body 参数的形式传递。
- Query 参数
restful.get({ id: 123 }).then(result => {
console.log(result);
});- Body 参数
restful.post({ id: 123, name: 'test' }).then(result => {
console.log(result);
});请求头信息
react-inject-restful 支持在请求头中添加 Token 等信息，可以通过设置 header 参数实现。
-- -------------------- ---- -------
------ ------- --------------
--------------------------
-
------- -- -- -------------------
------- ------
-------- -
---------------- ------- ------
-
-
--错误处理
使用 react-inject-restful 进行数据请求时，会自动处理全局错误和 401 错误和 403 错误。如果需要自定义错误处理，可以通过 catch 或者拦截器进行处理。
异常处理
restful.get({ id: 123 })
.then(result => {
console.log(result);
})
.catch(error => {
console.log(error);
});拦截器
-- -------------------- ---- -------
---------------------------------
------ -- -
-- -----------
------ -------
--
----- -- -
-- ---------
------ ----------------------
-
--
----------------------------------
-------- -- -
-- ---------
------ ---------
--
----- -- -
-- ---------
------ ----------------------
-
--结语
使用 react-inject-restful 可以让前端开发者更容易地实现 Restful API 的数据请求。本文介绍了 react-inject-restful 的基本使用和常见功能，希望能够帮助到大家。
完整示例代码：https://github.com/lwz7512/react-inject-restful-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005518181e8991b448ced46