使用 axios.CancelToken 后如何进行异步调用？

Question

我正在构建一个React Native应用程序。 我的 API 组件包含一个我希望能够停止的异步调用。 为此，我使用axios.CancelToken :.

const source = axios.CancelToken.source();


 async getProductCategoriesRequest() {
    try {
      let response = await catalog.get(`category`, {
        cancelToken: source.token,
      });
      return response.data;
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log(error)
        return Promise.reject();
      } 
    }
  }

从我的组件中，我在onPress上调用requestCancellationHandler ：

 const requestCancellationHandler = () => {
    source.cancel('API request is being canceled');
    props.resetState();
  };

一切都很好，除非我重新加载应用程序，否则我无法拨打另一个电话。 我在 API 请求 Catch 中不断收到Cancel {message: "API request is being canceled"} 。 简单的页面重新加载允许我进行另一个异步调用

我怎样才能解决这个问题而不必重新加载？

Answer 1

我认为Axios 文档中的第二个示例会很有用。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

在你的情况下，

let source;

 async getProductCategoriesRequest() {
    source = axios.CancelToken.source();
    try {
      let response = await catalog.get(`category`, {
        cancelToken: source.token,
      });
      return response.data;
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log(error)
        return Promise.reject();
      } 
    }
  }

和

 const requestCancellationHandler = () => {
    source.cancel('API request is being canceled');
    props.resetState();
  };