Axios 中断请求(AbortController、CancelToken)

1. 使用 AbortController

  • AbortControllerWeb API 的一部分,可以用来中止一个或多个 fetch 请求
  • 虽然 Axios 默认 不支持 直接使用 AbortController,但你可以通过传递 AbortController 的 signal 属性到 Axios请求 中来实现这一功能
  • 对于循环请求,你需要 为每个请求创建一个新的 AbortController 实例,并在合适的时机调用 abort 方法。
js 复制代码
const controller = new AbortController();
const { signal } = controller;

// 在你的请求中传递 signal
axios.get('/your-endpoint', { signal }).then(response => {
  // 处理响应
});

// 当需要中止请求时
controller.abort();

实例:如果有相同请求,先中断前一个

js 复制代码
const api = axios.create({
  baseURL: import.meta.env.VITE_APP_API_BASEURL,
  timeout: 1000 * 60,
})

const pendingMap = new Map() // abort 取消重复请求

function removePending(config: AxiosRequestConfig) {
  const key = `${config.method}:${config.url}:${JSON.stringify(filterNullUndefined(config.params || config.data))}`
  const abort = pendingMap.get(key)

  if (abort) {
    abort('cancel')
    pendingMap.delete(key)
  }
}

// axios实例拦截请求
api.interceptors.request.use(
  (config) => {
    // 如果有相同请求,先中断前一个
    removePending(config)
    const abortController = new AbortController()
    config.signal = abortController.signal
    pendingMap.set(
      `${config.method}:${config.url}:${JSON.stringify(filterNullUndefined(config.params || config.data))}`,
      () => abortController.abort('cancel'),
    )

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

2. 使用 Axios 的 CancelToken

  • Axios 提供了 CancelToken 功能,可以用来取消请求。你可以创建一个 CancelToken 实例,并在请求中传递它
  • 对于循环请求,你同样需要 为每个请求创建一个新的 CancelToken 实例,并保存每个请求的 取消函数
js 复制代码
import axios from 'axios'
const CancelToken = axios.CancelToken
let cancel

axios.get('/your-endpoint', {
  cancelToken: new CancelToken((c) => {
    // 保存取消函数
    cancel = c
  }),
}).then((response) => {
  // 处理响应
})

// 当你需要取消请求时
cancel()

实例:离开页面前中断循环请求

js 复制代码
const cancel = reactive<any>({})

// 单个请求体,i为索引
function singleChunk(i: number) {
  const dId = dataId.value

  const p = () => {
    return new Promise((resolve, reject) => {
      chunkDownload({
        id: dId,
        chunk: i + 1,
      }, {
        cancelToken: new CancelToken((c) => {
          // 保存取消函数
          cancel[i + 1] = c
        }),
      }).then((info) => {
        // ....
      })
        .catch((err) => {
          reject(err)
        })
    })
  }

  return p
}

// ......................................

// 页面销毁前
onBeforeUnmount(() => {
  // 终止请求
  for (const key in cancel) {
    if (typeof (cancel[key] === 'function')) {
      cancel[key]()
    }
  }
})
相关推荐
cs_dn_Jie20 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx