深入理解Axios源码：取消请求机制剖析

前端

2023-09-12 23:37:54

Axios源码阅读（三）：取消请求

在Axios这样的网络请求库中，取消请求是非常重要的一个特性。本文将通过阅读Axios的源代码，来介绍Axios是如何实现取消请求的。

本文将主要介绍以下两方面：

使用CancelToken取消请求
使用AbortController取消请求

使用 `CancelToken` 取消请求

CancelToken是一个用来创建和管理取消请求令牌的类。使用CancelToken取消请求的步骤如下：

创建一个CancelToken实例。
将CancelToken实例传递给Axios请求配置中的cancelToken属性。
当需要取消请求时，调用CancelToken实例的cancel()方法。

例如：

const source = Axios.CancelToken.source();
const request = Axios.get('/api/example', {
  cancelToken: source.token,
});

source.cancel();

当调用source.cancel()方法时，CancelToken实例将进入cancelled状态，并触发所有关联的Axios请求的cancel事件。

`CancelToken` 的设计模式

CancelToken的设计模式是观察者模式 。当一个CancelToken实例被创建时，它会创建一个Emitter实例，用于管理事件监听器。当cancel()方法被调用时，Emitter实例会触发cancel事件，通知所有监听器取消请求。

使用 `AbortController` 取消请求

AbortController是一个用来创建和管理中止请求信号的类。使用AbortController取消请求的步骤如下：

创建一个AbortController实例。
获取AbortController实例的signal属性，并将其传递给Axios请求配置中的signal属性。
当需要取消请求时，调用AbortController实例的abort()方法。

例如：

const controller = new AbortController();
const request = Axios.get('/api/example', {
  signal: controller.signal,
});

controller.abort();

当调用controller.abort()方法时，AbortController实例将触发AbortController实例的abort事件，并触发所有关联的Axios请求的cancel事件。

`AbortController` 的设计模式

AbortController的设计模式是观察者模式 。当一个AbortController实例被创建时，它会创建一个EventTarget实例，用于管理事件监听器。当abort()方法被调用时，EventTarget实例会触发abort事件，通知所有监听器中止请求。