axios取消重复请求

说明:在实际使用中,重复的请求往往导致数据结果显示错乱,例如,重复请求2次,表格分页展示的是第一次请求的数据。这种情况希望在请求第二次前取消第一次的请求

1、取消重复请求示例

<template>

<div>news组件</div>

<el-button type="primary" @click="handleClick">点击</el-button>

</template>

<script lang="ts" setup>

import axios from "axios";

let url = 'API地址'

let control

const handleClick = () => {

if(control) {

control.abort('取消之前的请求')

}

control = new AbortController()

axios.post(url, {

参数1: "123540",

参数2: "2025-04-01",

},{

signal: control.signal // 传递 signal,必须要的

}).then(res => {

console.log(res)

control = null

}).catch(err=>{

if(axios.isCancel(err)){

console.log(err.message+'取消请求')

}else{

console.log(err + '其他错误')}

})

}

</script>

2、封装axios,支持参数自定义取消请求

2.1封装成request.ts
复制代码
import axios from 'axios';
import type { AxiosRequestConfig } from 'axios';

// 存储pending请求
const pendingMap = new Map<string, AbortController>()

// 生成请求key
const generateReqKey = (config: AxiosRequestConfig) => {
  const { url, method, params, data } = config
  return [url, method, JSON.stringify(params), JSON.stringify(data)].join('&')
}

// 取消重复请求
const removePendingRequest = (config: AxiosRequestConfig, cancel: boolean = false) => {
  const requestKey = generateReqKey(config)
  if (pendingMap.has(requestKey)) {
    if (cancel) {
      pendingMap.get(requestKey)?.abort('取消重复请求')
    }
    pendingMap.delete(requestKey)
  }
}

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://example.cn',
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 由于 config 上不存在 cancelDuplicate 属性,这里使用可选链操作符来避免报错
  // 由于 AxiosRequestConfig 上不存在 cancelDuplicate 属性,我们可以使用类型断言来绕过类型检查
  const cancelDuplicate = (config as AxiosRequestConfig & { cancelDuplicate?: boolean })?.cancelDuplicate;
  if (cancelDuplicate === true) { // 默认不开启开启取消重复请求
    removePendingRequest(config, true)
    const controller = new AbortController()
    config.signal = controller.signal
    pendingMap.set(generateReqKey(config), controller)
  }
  return config
})

// 响应拦截器
instance.interceptors.response.use(response => {
  const { config } = response
  removePendingRequest(config)
  return response.data
}, error => {
  if (axios.isCancel(error)) {
    console.log(`请求被取消: ${error.message}`)
    return Promise.reject(error)
  }
  return Promise.reject(error)
})

export default instance
2.2 页面使用

只需要传入参数cancelDuplicate: true 就可以取消请求

复制代码
<template>
  <div>
    <el-button type="primary" @click="handleClick">取消重复请求</el-button>
  </div>
</template>
<script lang="ts" setup>
import request from '@/utils/request'

const handleClick = () => {
  request.post('/aisleep-api/ammsreport/app/report/explain', {
    uid: "123540",
    day: "2025-04-01"
  }, {
    headers: {
      "Token": "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxMjM1NDAsInVzZXJfa2V5IjoiYzgxZmJmNmYtMTI4Mi00ZWQyLTlhZGMtM2ZiN2EyMjVjZDFkIiwidXNlcm5hbWUiOiIxMzY3MDAzNjk0NiJ9.teA6bo8aIJhmrTiMdwSVpYcUS_qZrxKk29qlnYz0Zzb184FrbQJyQZhWybDk4vWLKLzmomDA53Wv_INShfXJSA"
    },
    cancelDuplicate: true // 开启取消重复请求
  }).then(res => {
    console.log(res)
  }).catch(err => {
  })
}
const getData = async () => {
  request.post('/aisleep-api/ammsreport/app/report/explain', {
    uid: "123540",
    day: "2025-04-01"
  }, {
    headers: {
      "Token": "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxMjM1NDAsInVzZXJfa2V5IjoiYzgxZmJmNmYtMTI4Mi00ZWQyLTlhZGMtM2ZiN2EyMjVjZDFkIiwidXNlcm5hbWUiOiIxMzY3MDAzNjk0NiJ9.teA6bo8aIJhmrTiMdwSVpYcUS_qZrxKk29qlnYz0Zzb184FrbQJyQZhWybDk4vWLKLzmomDA53Wv_INShfXJSA"
    },
  }).then(res => {
    console.log(res)
  }).catch(err => {
  })
}
onMounted(() => {
  getData()
  setTimeout(() => {
    getData()
  }, 100)
})
</script>
3.3 运行结果
相关推荐
sunbyte3 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^4 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库6 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端6 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED6 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪7 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程7 小时前
如何测试短信接口
java·服务器·前端