使用axios在reactjs中转到下一页时如何取消待处理的API？

Question

如何使用Axios在reactjs中转到下一页时取消待处理的API？

我在一个页面中调用超过5个API，当我导航到该页面时，（/userProfile）一个接一个地调用API，直到所有调用并得到响应，所以所有API都在队列中。但是当我立即离开该页面到另一个页面（/myTrans）时，/userProfile 的所有 API 都处于待处理状态，成功后，该 /myTrans 的 API 正在调用，我应该如何取消或中止 /userProfile 的所有待处理 API。

my axios.ts


import Snackbar from "awesome-snackbar";
import _axios from "axios";
import LocalStorageKey from "../constants/LocalStorageKey";
const baseURL =
  process.env.REACT_APP_BASE_URL;

const axios = _axios.create({ baseURL });

axios.interceptors.request.use((config) => {
  var X_AUTH_TOKEN =
    localStorage.getItem(LocalStorageKey.token);
  const X_VERIFY_TOKEN = localStorage.getItem("vkey") ?? "";

  if (X_AUTH_TOKEN === 'undefined') {
    X_AUTH_TOKEN = "eyJhbGciI1NiIsInR5c"
  }

  if (X_AUTH_TOKEN !== '') {
    config.headers.set("Authorization", `Bearer ${X_AUTH_TOKEN}`);
  }
  config.headers.set("X-Verify-Key", X_VERIFY_TOKEN);

  return config;
},

  error => {
    return Promise.reject(error)
  }

);

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.log(error);
    const { response } = error;
    if (response) {
      const errorObject = response.data;
      const code = errorObject.result_code;

      if (code === 401) {
        new Snackbar("Your login session has expired. Please login again")
      }

      throw errorObject;
    }

    throw error;
  }
);

export default axios;

我的个人资料.ts

import axios from "../axios";



export const getClientProfile = async () => {
    const res = await axios
        .get("/client/profile")
        .then((respons) => {
            console.log(" Client Profile respons ", respons.data);
            return respons.data as ClientProfileModel;
        })
        .catch((error) => {
            return null;
        });

    return res;
};
export const getAddtionalInfo = async (target?: any) => {

    const res = await axios
        .get(`/client/personalDetail?target=${target}`)
        .then((respons) => {
            console.log("/client/personalDetail", respons);
            return respons.data
        })
        .catch((error) => {
            return null;
        });

    return res;
};

Answer 1

你可以使用 AbortController 来实现这一点，它应该是这样的：

const controller = new AbortController();

const response = await axios.get(
  `/whateverAPI`, {
    controller.signal
  }
);

并使用：

controller.abort();

当您想取消时。