axios 取消多次重复请求

使用axios取消重复请求的实现方法

原创已于 2022-12-02 10:17:52 修改 · 856 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

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

这篇博客介绍了如何在前端开发中利用axios取消重复请求，主要涉及两种方式：AbortController和cancelToken。通过在请求拦截器中保存请求URL和取消函数，并在响应拦截器中删除相关key来实现。示例代码分别展示了在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，用来判断该接口是否需要做多次请求取消上一个请求的操作
  if (config.isCancelToken) {

    // 第一种 AbortController
    const controller = new AbortController();
    config['signal'] = controller.signal
    pedding[config.url + '&' + config.method] && pedding[config.url + '&' + config.method].abort()
    pedding[config.url + '&' + config.method] = controller

    // 第二种 CancelToken.source
    const source = CancelToken.source()
    config['cancelToken'] = source.token
    pedding[config.url + '&' + config.method] && pedding[config.url + '&' + config.method].cancel()
    pedding[config.url + '&' + config.method] = source

    // 第三种 CancelToken
    pedding[config.url + '&' + config.method] && pedding[config.url + '&' + config.method]()
    config['cancelToken'] = new CancelToken((c) => {
      pedding[config.url + '&' + config.method] = c
    })

  }

  return config
}, error => {
  return Promise.reject(error)
})

service.interceptors.response.use(response => {
  // 这里删除key
  pedding[response.config.url + '&' + response.config.method] && delete pedding[response.config.url + '&' + response.config.method]

  if (response.data.code == 200) {
    return response.data
  } else {
    message.error(response.data.msg)
    return Promise.reject(response.data)
  }
}, error => {
  return Promise.reject(error)
})

export default service

以上三种方式选一个就可以。

例子：

@/views/home.vue

<template>
  <div>
    <a-button>home</a-button>
    <router-link to="/about">跳转about</router-link>
    <a-input placeholder=""></a-input>
    <a-checkbox></a-checkbox>
  </div>
</template>

<script>
import { login } from '@/axios/api/home'
export default {
  setup() {
    login({timeRange: 'ONE_DAY'}).then(res => {
      console.log('第一次调用-success')
    }).catch((err) => {
      console.log('第一次调用-err')
    })
    setTimeout(() => {
      login({timeRange: 'ONE_DAY', num: 1}).then(res => {
        console.log('第二次调用-success')
      }).catch((err) => {
        console.log('第二次调用-err')
      })
    }, 200)
  }
}
</script>

<style lang="scss" scoped>
</style>

@/axios/api/home.js

import request from '@/axios'

export const login = (data) => {
  return request({
    url: '/dc/pc/heatMap',
    method: 'get',
    params: data,
    isCancelToken: true
  })
}

结果：