Question

所以我正在项目中实现axios呼叫取消。现在看axios文档似乎很简单https://github.com/axios/axios#cancellation

所以我确实在Vue组件的顶部定义了变量，例如

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

最明显的是import axios from 'axios';

然后我有一种获取API的方法在该方法的顶部，我想取消请求以防它正在运行，因此如果用户向过滤器发送垃圾邮件，最后一个请求将被取消。

async fetchPartners(inputToClear) {
            source.cancel();
            ...

            try {
                const response = await axios.get(`../partners?limit=1000${this.createRequestString()}`, {
                    cancelToken: source.token
                });
                // Here you can see I did add the cancelToken to the request

                this.partners = response.data.data;
            } catch (error) {
                if (axios.isCancel(error)) {
                    console.log('Request canceled', error.message);
                }
                const fetchErrors = this.utilGlobalHandleErrorMessages(error);

                this.utilGlobalDisplayMessage(fetchErrors.message, { type: 'error' });

                return [];
            } finally {
                ...
            }
        },

所以这很简单，只是从我上面提供给您的axios文档中获取了代码，它应该在逻辑上起作用。但是实际上发生了什么，它甚至不允许我提取呼叫，在我可以调用之前已被取消。在控制台上，它显示了我

Request canceled undefined

它就像我取消通话一样捕获错误，但是怎么回事，因为我在通话之前source.cancel()。

有人知道吗？

Answer 1

我希望您应该throttle而不是取消请求。

如果油门不符合您的要求，您可以尝试以下方法吗？

const CancelToken = axios.CancelToken;
let source;

async fetchPartners(inputToClear) {
    if(source){
      source.cancel();
    }
    ...
    source = CancelToken.source();

    try {
      const response = await axios.get(`../partners?limit=1000${this.createRequestString()}`, {
       cancelToken: source.token
      });
      // Here you can see I did add the cancelToken to the request

      this.partners = response.data.data;
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
      }
      const fetchErrors = this.utilGlobalHandleErrorMessages(error);

      this.utilGlobalDisplayMessage(fetchErrors.message, {
        type: 'error'
      });

      return [];
    } finally {
      ...
    }
  }

Axios在取消调用之前取消令牌取消请求

1 个答案: