前言
nwjr 是一个开源的 npm 包，用于简化 React 开发中的网络请求。本文将介绍该包的使用，包括安装、配置、使用以及常见问题解决方法等。
安装
使用 npm 命令进行安装：
npm install nwjr --save
配置
首先，在项目中安装 axios 和 react-toastify，它们是 nwjr 的依赖项。
npm install axios react-toastify --save
之后，在项目根目录下的 src 目录中创建一个 api.js 文件。该文件将用于定义项目的所有 API，并将其导出。
import axios from 'axios';
export const api = axios.create({
baseURL: process.env.REACT_APP_API_URL,
});
export const login = (data) =>
api.post('/login', data);在上面的示例中，我们使用了 axios 的 create 方法来创建一个 axios 实例，并设定了其 baseURL 属性为环境变量 REACT_APP_API_URL。
之后，我们定义了一个名为 login 的 API 方法。该方法通过 POST 请求将给定数据发送到 /login 路径。接下来，我们需要使用 nwjr 来将该方法转换为一个 React Hooks。
在 src 目录中创建一个 services 目录，并在其中新建一个 auth.js 文件。接下来我们需要导入刚刚定义的方法，并使用 createApiHandler 来将其转换为一个 React Hook。代码如下：
import { createApiHandler } from 'nwjr';
import { login } from '../api';
export const useLogin = createApiHandler(login);此处，我们将 login 方法传递给了 createApiHandler。该方法将返回一个自定义 Hook，我们将其命名为 useLogin。
使用
最后，我们可以在组件中使用我们刚刚定义的 useLogin Hook。我们将使用 useState 来定义 email 和 password 的状态，并使用 useLogin 来执行登录操作。
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - -------- - ---- -------------------
------ ----- --------- - -- -- -
----- ------- --------- - -------------
----- ---------- ------------ - -------------
----- - ------- ------ ------- ------ - - -----------
----- ------------ - --- -- -
-------------------
-------- ------ -------- ---
--
------ -
----- ------------------------
------
------------
-------------------
-------------
------------- -- -------------------------
--
------
---------------
----------------------
----------------
------------- -- ----------------------------
--
------- ----------------------------
------- --- --------- -- -
---------------------
--
------- -- -
----------- ----------------------
--
------ -- -
---------- ----------------
--
-------
--
--在上面的示例中，我们首先使用 useState 来定义 email 和 password 的状态，并使用 useLogin Hook 获取 iState、iData 和 iError 等返回值。同时，在按钮的点击事件中，我们将 email 和 password 数据作为参数传递给 handle 方法，该方法将执行登录操作。
如上所述，我们只需在 hooks 中定义每个 API 方法，然后就可以像上面这样在组件中进行调用。
常见问题
Q: 如何将某个请求取消？
A: 您只需调用返回的控制函数即可取消请求。例如:
const { iState, handle, cancel } = useSomeApi();
handle();
// 在需要取消请求的时候
cancel();Q: 如何自定义 axios 实例？
A: 您可以传递自己的 axios 实例到 nwjr 中。例如：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------- ------ ----- ---- -------- ------ ----- --- - -------------- -------- ------------------------------ --- ------ ----- ---------- - ----------------- ----------------- ------------- --
在上面的示例中，我们将自定义的 axios 实例 api 传递到了 createApiHandler 中，从而创建一个自定义的 Hook。
结论
使用 nwjr 可以大大简化 React 开发中的网络请求。我们只需要在组件中使用 hooks 来调用定义好的 API 方法，就可以实现网络请求的功能。同时，nwjr 还支持请求缓存、错误处理和取消等功能。希望这篇文章能够帮助您更好地使用 nwjr。如果您有任何问题或建议，欢迎在评论区讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66ca1