reactjs - 如何在拦截器中使用axios cancelToken？

Question

在 ReactJs 中，我使用 Axios 从 API 获取数据。当我尝试发出重复请求时，我需要使用cancelToken 。例如：假设我在完成 Axios 请求之前在主页上，我被要求访问 About 页面。结果，React 应用程序显示内存泄漏错误。所以，我的计划是在axios拦截器中设置axios cancelToken。我试过了，但它对我不起作用。

请求API.js

import axios from 'axios';

const requestApi = axios.create({
  baseURL: process.env.REACT_APP_API_URL
});
const source = axios.CancelToken.source();

requestApi.interceptors.request.use(async config => {
  const existUser = JSON.parse(localStorage.getItem('user'));
  const token = existUser && existUser.token ? existUser.token : null;
  if (token) {
    config.headers['Authorization'] = token;
    config.headers['cache-control'] = 'no-cache';
  }

  config.cancelToken = source.token;

  return config;
}, error => {
  return Promise.reject(error);
});

requestApi.interceptors.request.use(async response => {
  throw new axios.Cancel('Operation canceled by the user.');
  return response;
}, error => {
  return Promise.reject(error);
});

export default requestApi;

仪表板.js

import requestApi from './requestApi';

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await requestApi.get('/dashboard');
      console.log(res.data);
    } catch (error) {
      console.log(error);
    }
  }

  fetchData();
}, []);

标签： reactjsaxiostoken

Answer 1

以防您仍然需要它或其他人来寻找它。这就是它对我有用的方式。

import axios from "axios";

// Store requests
let sourceRequest = {};

const requestApi = axios.create({
  baseURL: process.env.REACT_APP_API_URL
});

requestApi.interceptors.request.use(
  async config => {
    const existUser = JSON.parse(localStorage.getItem("user"));
    const token = existUser && existUser.token ? existUser.token : null;
    if (token) {
      config.headers["Authorization"] = token;
      config.headers["cache-control"] = "no-cache";
    }

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

requestApi.interceptors.request.use(
  request => {
    // If the application exists cancel
    if (sourceRequest[request.url]) {
      sourceRequest[request.url].cancel("Automatic cancellation");
    }

    // Store or update application token
    const axiosSource = axios.CancelToken.source();
    sourceRequest[request.url] = { cancel: axiosSource.cancel };
    request.cancelToken = axiosSource.token;

    return request;
  },
  error => {
    return Promise.reject(error);
  }
);

export default requestApi;