vue 接口中断请求AbortController

刘哈哈哈哈

已于 2024-04-16 10:41:29 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： vue.js 前端 javascript

于 2023-03-01 15:44:40 首次发布

本文链接：https://blog.csdn.net/lxy123456qqq/article/details/129282988

vue3 专栏收录该内容

3 篇文章

订阅专栏

文章介绍了两种在JavaScript中中断HTTP请求的方法：一是使用AbortController，通过实例化AbortController并在组件卸载时调用abort方法来取消请求；二是利用axios库的CancelToken，可以通过传递executor函数或者使用CancelToken.source()来创建和取消请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接口中断请求两种方法

第一种：AbortController

接口
export function getPeopleList(data:any,signal:any){
  return request({
    url: '/entityQuery/personGroup',
    method: 'post',
    data,
    signal:signal.signal
  })
}
//发送请求及定义变量
const abortController = new AbortController()
 getdetail(params1.value, abortController).then(res => {
 })
//组件销毁时中断
  onUnmounted(() => {
      abortController.abort()
    });

第二种：CancelToken
（1）方法1 传递executor函数到CancelToken的够造函数来创建cancel token

import axios from 'axios'
const cancelToken = axios.CancelToken
export function uploadFileNew(params,that) {
  let url = "url";
  return request({
    url: url,
    method: 'post',
    cancelToken: new cancelToken(function executor(c) {
      that.cancel=c
    }),    
  })
}
//接口请求
await API.uploadFileNew(params, this )
//在需要取消请求的地方使用
 this.cancel()

（2）方法2 可以利用CancelToken工厂函数创建cancel token

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// get 方法使用案例
axios.get('user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message)
  } else {
    // TODO: handle error
  }
})
// post 使用案例
axios.post('/user/12345', {
  name: 'name what'
}, {
  cancelToken: source.token
})
 
// 执行取消请求操作
source.cancel(‘请求已取消’)