vue取消接口请求CancelToken

原创已于 2023-02-02 09:53:51 修改 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-12-27 14:21:26 首次发布

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

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

解决方案一：统一封装

1. 可以利用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(‘请求已取消’)

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

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();
      }
    },
  }
}