vue中如何取消上次axios请求

19年7月12更新 -> 此方法大概率可以用防抖和节流解决

在项目中碰到了短时间多次请求的情况,为了更好地用户体验和性能,需要取消上次axios请求,具体代码如下。
官方文档:axios文档

export default {
    data() {
      return {cancelTokenFn: null}
    },
    methods: {
      cancelTokenDone() {
        const _this = this
        const CancelToken = axios.CancelToken;
        this.cancelTokenFn && this.cancelTokenFn();
        this.cancelTokenFn = null;
        axios.get('url', {
          cancelToken: new CancelToken(function executor(c) {
            _this.cancelTokenFn = c
          })
        })
          .then(function (response) {
            const data = response.data;
            console.log(data);
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    }
  }
Logo

前往低代码交流专区

更多推荐