使用 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();
  };