Question

我有一个Axios获取请求，我想在某个事件上取消该请求，但似乎不起作用。

// user.services.js
searchFAQS(query) {
    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    source.cancel('Operation cancelled by user')

    return axios.get(
      authHeader.getApiUrl() + '/api/v1/search_faqs',
      {
        cancelToken: source.token,
        params: {
          query: query
        }
      }
    )
  }


// ClassComponent
  onChangeQuery = (e) => {
    if (e.target.value === "") {
      this.setState({
        fFaq: "",
        query: e.target.value
      })
    } else {
      UserServices.searchFAQS().cancel()
      this.setState({query: e.target.value},
        () => UserServices.searchFAQS(this.state.query)
          .then(resp => {
            this.setState({
              fFaq: resp.data,
              fGroups: resp.data.map(f => f.group).filter((value, index, self) => self.indexOf(value) === index)
            })
          }))
    }
  }

我阅读了Axios documentation的取消部分，这就是促使我进行上述尝试的原因，但是在观察开发人员工具的请求后，它似乎并没有取消。

Answer 1

searchFAQS(query) {
    const CancelToken = axios.CancelToken;
.....

新的CancelToken是在每个searchFAQS调用上创建的，因此不会被取消，因为每次都是新的令牌

更改如下

let token = null; // define cancel token outside the search fn, then it will not recreate on every call

searchFAQS(query) {
    if (token !== null) {
        token();
    }
    ...

    const { CancelToken } = axios;
    ...
    return axios.get(
       authHeader.getApiUrl() + '/api/v1/search_faqs',
          {
               cancelToken: new CancelToken(function executor(cancellableFn) {
                   token = cancellableFn;
               }),
               params: {
                   query: query
               }
           }
....

Answer 2

据我了解，您的解决方案应如下所示：

// user.services.js
async searchFAQS(query, source = '') {
    const search = axios.get(
      authHeader.getApiUrl() + '/api/v1/search_faqs',
      {
        cancelToken: source.token,
        params: {
          query: query
        }
      }
    );
    if (source /* change to your needs, actualy it cancels all requests */) {
      source.cancel('Ok, its just canceled!');
    }

    return await search.data;
  }


// ClassComponent

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

  onChangeQuery = (e) => {
    if (e.target.value === "") {
      this.setState({
        fFaq: "",
        query: e.target.value
      })
    } else {
      UserServices.searchFAQS("", source)
      this.setState({query: e.target.value},
        () => UserServices.searchFAQS(this.state.query, source)
          .then(resp => {
            this.setState({
              fFaq: resp.data,
              fGroups: resp.data.map(f => f.group).filter((value, index, self) => self.indexOf(value) === index)
            })
          }))
    }
  }

在React中取消Axios获取请求

2 个答案: