在编写前端程序时，很多时候我们需要与服务端进行交互。一些耗时的请求可能会导致用户体验变差，而取消这些请求又是一件比较困难的事情。这时候，我们就需要 cancellation-wrapper 这个 npm 包了。
什么是 cancellation-wrapper？
cancellation-wrapper 是一个为 axios 封装的 npm 包，它的作用是让我们能够取消已经发起的异步请求。使用该包能够让我们更加灵活地控制请求，提升用户体验。
如何使用 cancellation-wrapper？
安装
在项目目录中，执行以下命令进行安装：
npm install --save cancellation-wrapper
引入和初始化
在需要使用 cancellation-wrapper 的地方引入包，并初始化：
import axios from 'axios'; import CancellationWrapper from 'cancellation-wrapper'; const axiosApiInstance = axios.create(); // 创建 axios 实例 const axiosCancelWrapper = CancellationWrapper.wrapAxios(axiosApiInstance); // 使用 cancellation-wrapper 包装
发起请求
使用 cancellationWrapper 发起请求：
-- -------------------- ---- -------
----------------------------
---- --------------------------------------
------- ------
------------ --- --------------------- -- -
-- ------
------------
---
------------------ -- -
-- -------
---------------- -- -
-- ----- -----
---取消请求
在需要取消请求的地方调用 cancel() 方法即可：
let cancel;
const onCancel = (c) => {
cancel = c;
};
// 调用后，请求会被取消
cancel();示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------------- ---- -----------------------
----- ---------------- - --------------- -- -- ----- --
----- ------------------ - ------------------------------------------------ -- -- -------------------- --
--- -------
----- -------- - --- -- -
------ - --
--
----------------------------
---- --------------------------------------
------- ------
------------ --- --------------------- -- -
------------
---
------------------ -- -
-- -------
---------------- -- -
-- ----- -----
---
--------- -- ----深度解析
什么是 CancelToken
在我们发起请求时，我们通过传入 CancelToken 参数来创建一个 Token。而在取消请求时，我们同样需要使用这个 Token。下面是 CancelToken 的定义：
-- -------------------- ---- ------- ---- ----------- - - --- - ------------- ------ -- --------- ------------------ --- - ------------------ ------ - - -------- --------- -------------- ----- ------------ - ----------- -------- -- --------------- ------------------ --- - ---------------- ----------- --- - ------ ----- - ------- -- --------------- ----- -------- --
由此，我们可以看到，一个 CancelToken 对象包含了三个方法，其中两个是静态方法，一个是实例方法。通过 CancelToken，我们可以方便地生成一个 Token。
什么是 CancelTokenSource
CancelTokenSource 在上面的定义中用到了，它同样是一个可以生成 Token 的对象。下面是它的定义：
-- -------------------- ---- ------- ---- ----------------- - - --- - -------- -- ------- --------- --- - ------- ------ -- ------ ------------ --
CancelTokenSource 包含了两个属性，一个是用于取消请求的方法 cancel()，另一个是用于取消的 Token 对象。通过 CancelTokenSource，我们可以拿到一个可以用于取消请求的 Token。
wrapAxios
在注入 closure 的时候，cancellation-wrapper 选择了将 cancelToken 和 axios 实例的 closure 一块保存到 closure 数组中。其中，cancelToken 部分主要是用来支持以取消 request 的功能，而 axios 实例则是为了方便 request 的调用。
-- -------------------- ---- -------
------ ------ ----------- - ------------------------ -- -
----- --------------- -------------------- - ---
-- ------
------ -
-- --- -------- --
-------- --- - - ------------------
------- ------------------ - ------------------
- --
-----------------------------
--------- ------- --------- -- -
----- - ------------ -------------- - - -------
-- ------
-- - ----------- - ----- --- ------- --- ------- ---
--------------------- ------------ ------------ ---
-------------
---------------------
---------------- -- -
-- ---
--
-------------- -- -
-- ---
---
--
-
----------- -- -- -
-- -- ------- ------- ------- - -----------
--- ------ ------- -- --------------- -
----- - ------------ ------------ - - --------
-------------------------------- -- ----- --- ------------
---------------------------------------------- -- ----- --- ----- ------------
-
--
--
-----
--
-在使用 cancellation-wrapper 的时候，我们可以通过 cancel() 方法来取消请求。同时，在请求被取消时，我们也把 cancelToken 的 request 调用取消掉。由此，我们保证了请求被成功取消。
总结
cancellation-wrapper 可以让我们更加灵活地控制请求，提升用户体验。在使用 cancellation-wrapper 时，我们需要进行初始化、发起请求、取消请求等步骤。同时，在深度解析时，我们也介绍了 CancelToken 和 CancelTokenSource 对象，以及 wrapAxios 的实现原理。为了保证请求的正常运行，我们需要检查 cancelToken 和 axios 的 cancellation 是否被触发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735c890c4f7277583fca