简介
Cancelable-fetch 是一个可以取消 fetch 请求的 npm 包。在开发中，经常会遇到发送一个请求之后，因为各种原因导致请求不能完成，而此时页面已经跳转或其他操作，这时候回来再去处理这个请求，往往是比较困难的。为了解决这个问题，我们可以使用 npm 包 cancelable-fetch，它可以让我们在请求发送后随时取消请求。
安装
首先，我们需要使用 npm 或 yarn 安装 cancelable-fetch 包。
通过 npm 安装：
npm install cancelable-fetch --save
通过 yarn 安装：
yarn add cancelable-fetch
使用
Cancelable-fetch 包的使用非常简单，只需要在发送请求时传入一个 CancellationToken 对象即可。CancellationToken 对象是一个包含 cancel 方法的对象，调用该方法即可取消请求。取消请求后，我们可以通过该对象的 isCancellationRequested 属性来获取当前请求是否已被取消。
下面来看一个例子：
-- -------------------- ---- -------
------ - --------------------------- ----------- - ---- -------------------
----- ----------- - ---------------------
----------------------------------------------------- -
------- ------
------------ ------------------
--
---------------- -- -
----------------------
--
-------------- -- -
---------------------------
---
-- ----
---------------------在上面的例子中，我们首先通过 CancelToken.source() 方法创建一个 CancellationToken 对象和一个对应的取消方法。然后我们在发送请求时通过 cancelToken 参数将该 CancellationToken 对象传入 fetch 请求中。
在请求发送之后，如果我们想要取消请求，可以调用 tokenSource.cancel() 方法即可。通过该方法取消请求后，FetchWithCancellationToken 的 catch 方法将会返回一个 message 为“请求已取消”的错误。
总结
Cancelable-fetch 是一个非常实用的 npm 包，可以让我们在开发过程中更加方便地管理请求。在开发中，我们可能会遇到需要发起多个请求的场景，如果没有一个好的管理方式，对于那些已经发送但是未完成的请求将会变得非常难以处理。使用 cancelable-fetch，我们可以方便地随时取消请求并获取请求状态，从而可以更好地管理我们的请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c91ccdc64669dde598f