axios 取消多次重复请求

VIP文章 weixin_45194587

已于 2022-12-02 10:17:52 修改

阅读量595

点赞数

文章标签： javascript 前端 vue.js

于 2022-12-01 18:26:41 首次发布

本文链接：https://blog.csdn.net/weixin_45194587/article/details/128136327

版权

思路：

1、在请求拦截的时候将当前request url 和取消函数以key-value的形式保存下来，如果重复请求了就调用取消函数；

2、在响应拦截时将这个key删除

方式：

1、AbortController：从v0.22.0开始，axios支持以fetch API方式——AbortController取消请求，用此方式一定要注意axios的版本，v0.22.0以下失效

2、cancelToken：此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。不过我的axios当前版本v1.2.0，还可以使用cancelToken

上代码：

axios的二次封装： @/axios/index.js

import axios from 'axios'
import store from '@/store'
import { message } from 'ant-design-vue'

const CancelToken = axios.CancelToken

let pedding = {}

const service = axios.create({
  baseURL: '/',
  timeout: 60000,
})

service.interceptors.request.use(config => {
  config.headers['token'] = store.state.user.token

  // 在参数中加个isCancelToken，用来判断该接口是否需要做多次请求取消上一个请