axios实现一整套完整的切换路由取消请求与取消重复请求方案

2023-10-24 02:33:08

前言

关于axios取消请求的文章和资料不胜其数。大部分都是单独介绍切换路由时取消上个页面尚未完成的请求或者取消重复请求的文章，且大部分是介绍了核心的内容，缺乏关于一整套完整的方案的。关于axios取消请求，官方文档也有简单到使用方法，基础方法我这里不赘述，直接写方案。

方案思路

在需要发送请求的组件中，定义一个axios实例。
在发送请求之前，在axios实例中设置一个取消令牌。
当切换路由时，取消axios实例中的所有请求。
当组件被销毁时，取消axios实例中的所有请求。
这样，就可以实现切换路由时取消上个页面尚未完成的请求，以及取消重复请求。

具体实现

在需要发送请求的组件中，定义一个axios实例。

const axiosInstance = axios.create();

在发送请求之前，在axios实例中设置一个取消令牌。

const cancelToken = axios.CancelToken.source();

axiosInstance.get('/api/v1/users', {
  cancelToken: cancelToken.token,
}).then((response) => {
  // 请求成功
}).catch((error) => {
  // 请求失败
});

当切换路由时，取消axios实例中的所有请求。

this.$router.beforeEach((to, from, next) => {
  // 取消所有正在进行的请求
  axiosInstance.cancelAllRequests();

  next();
});

当组件被销毁时，取消axios实例中的所有请求。

beforeDestroy() {
  // 取消所有正在进行的请求
  axiosInstance.cancelAllRequests();
}

代码示例

// 在需要发送请求的组件中，定义一个axios实例。
const axiosInstance = axios.create();

// 在发送请求之前，在axios实例中设置一个取消令牌。
const cancelToken = axios.CancelToken.source();

axiosInstance.get('/api/v1/users', {
  cancelToken: cancelToken.token,
}).then((response) => {
  // 请求成功
}).catch((error) => {
  // 请求失败
});

// 当切换路由时，取消axios实例中的所有请求。
this.$router.beforeEach((to, from, next) => {
  // 取消所有正在进行的请求
  axiosInstance.cancelAllRequests();

  next();
});

// 当组件被销毁时，取消axios实例中的所有请求。
beforeDestroy() {
  // 取消所有正在进行的请求
  axiosInstance.cancelAllRequests();
}