axios 取消多次重复请求

思路:

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,用来判断该接口是否需要做多次请求取消上一个请

你可能感兴趣的:(javascript,前端,vue.js)