vue取消接口请求CancelToken

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

解决方案一：统一封装

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处理

export function getSelfCollectionResourceList(data,_this) {
  return request({
    url: "/xxxx/xxx/xxxx",
    method: "POST",
    data,
    cancelToken: new axios.CancelToken((c) => {
      _this.cancelFun = c
  }),
  });
}

2、vue调用处理

export default {
  data(){
    return {
      cancelFun :null,
    }
  },
  method:{
    cancelRequest() {
      if (typeof this.cancelFun === 'function') {
        this.cancelFun()
      }
    }, 
    getSelfCollectionResource() {
      this.cancelRequest();
      getSelfCollectionResourceList({
        xxx:xxxx
      },this).then(res => {
        this.total = res.result.totalNum;
        this.resList = res.result.list;
      });
    },
  }
}

问题，按照上述写法，并未出现pending状态的接口请求

参考：https://www.jianshu.com/p/1662e2524c64

遇到的问题汇总

相关

标签