vue取消接口请求CancelToken

本文探讨了在JavaScript中使用axios库时如何优雅地处理多次接口请求间的取消,提供了两种解决方案:一是通过统一封装管理CancelToken,二是针对单个接口实现取消功能。实例展示了如何在Vue中应用这些技巧来确保请求的高效管理和错误处理。

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

   因业务需求,需要请求多次同一接口,需要在请求接口时,取消上个未完成的接口请求

解决方案一:统一封装

1. 可以利用CancelToken工厂函数创建cancel token

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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(‘请求已取消’)

解决方案二:单个接口处理

1、api处

import axios from 'axios';


//导出表格
export function DataExport(data, _this) {
    return request({
        url: 'data/export',
        responseType: 'blob',
        method: 'post',
        data: data,
        cancelToken: new axios.CancelToken((c) => {
            _this.cancelFun = c
        }),
    })
}

2、vue调用处理

export default {
  data() {
    return {
      cancelFun: null, //取消接口
    };
  },
  methods: {
    //运行接口
    CatchExport(){
      this.cancelCsv();
        DataCatchExport(this.queryParams, this).then((res) => {
           this.$message({
                type: "success",
                message: "导出成功!",
              });
            })
            .catch((err) => {
              console.log(err);
            });
    },
     //取消接口
    cancelCsv() {
      if (typeof this.cancelFun === "function") {
        this.cancelFun();
      }
    },
  }
}

Vue.js 开发中,如果你想要中断正在进行的 API 接口请求,通常会通过 Vue 的生命周期钩子、Vuex 状态管理库或者 Axios 库来处理。以下是几种常见的方式: 1. **Vue 生命周期钩子**: - 在 `beforeDestroy` 或者 `asyncData`(如果在组件中使用)中,你可以取消之前发起的请求。例如,如果你使用的是 axios: ```javascript data() { return { loading: false, data: null } }, mounted() { this.fetchData().catch(() => { /* 请求失败时取消 */ }); }, beforeDestroy() { // 取消正在请求的数据 if (this.$axios.isCancel(this.cancelToken)) return; this.cancelToken && this.cancelToken.unsubscribe(); }, methods: { fetchData() { this.loading = true; const cancelTokenSource = axios.CancelToken.source(); this.cancelToken = cancelTokenSource.token; return axios.get('/api/data', { cancelToken: cancelTokenSource.token }).then(response => { this.data = response.data; this.loading = false; }) .catch((error) => { if (axios.isCancel(error)) { console.log('Request cancelled'); } else { console.error(error); } }); } } ``` 2. **Vuex**: 如果你在 Vuex store 中管理数据请求状态,可以创建一个异步 action 并使用 `cancelToken` 来控制请求。当组件销毁时,通过 dispatch 一个取消请求的操作。 3. **Axios插件**: 有些开发者可能会选择使用第三方的 Axios 插件如 vue-axios 或 vaxios,它们通常内置了取消请求的功能,只需要在需要的地方引用并取消请求即可。 记得在每个具体的场景下,检查官方文档或所使用的库是否有提供相应的取消请求函数或方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值