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