如何在Axios拦截器中调用自定义React错误组件

Axios拦截器不属于React渲染上下文，无法直接在里面调用或渲染React组件。可以通过状态管理或事件通知的方式间接触发错误组件的显示，以下是两种可行方案：

方案一：React Context + 全局状态挂载 #

1. 创建错误状态Context #

// ErrorContext.js
import { createContext, useContext, useState } from 'react';

const ErrorContext = createContext();

export function ErrorProvider({ children }) {
  const [error, setError] = useState(null);
  return (
    <ErrorContext.Provider value={{ error, setError }}>
      {children}
    </ErrorContext.Provider>
  );
}

export function useError() {
  return useContext(ErrorContext);
}

2. 在根组件注入Provider并挂载全局状态方法 #

// App.js
import { ErrorProvider } from './ErrorContext';
import AppContent from './AppContent';

function App() {
  return (
    <ErrorProvider>
      <AppContent />
    </ErrorProvider>
  );
}

export default App;

// AppContent.js
import { useError, useEffect } from './ErrorContext';
import CustomErrorComponent from './CustomErrorComponent';
import YourRoutes from './YourRoutes';

export default function AppContent() {
  const { setError } = useError();

  useEffect(() => {
    // 将setError挂载到全局，供Axios拦截器调用
    window.setGlobalError = setError;
  }, [setError]);

  return (
    <>
      <YourRoutes />
      <CustomErrorComponent />
    </>
  );
}

3. 编写自定义错误组件 #

// CustomErrorComponent.js
import { useError } from './ErrorContext';

export default function CustomErrorComponent() {
  const { error, setError } = useError();

  if (!error) return null;

  return (
    <div className="error-overlay">
      <div className="error-card">
        <h3>请求失败</h3>
        <p>{error}</p>
        <button onClick={() => setError(null)}>关闭提示</button>
      </div>
    </div>
  );
}

4. 修改Axios拦截器触发错误 #

// axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  (response) => {
    if (response.config.parse) {
      // 这里处理响应数据
    }
    return response;
  },
  (error) => {
    // 调用全局方法触发错误组件显示
    window.setGlobalError?.(error.message);
    return Promise.reject(error.message);
  }
);

export default axiosInstance;

方案二：自定义事件总线 #

1. 创建事件总线模块 #

// eventBus.js
const eventBus = {
  on(event, callback) {
    document.addEventListener(event, (e) => callback(e.detail));
  },
  emit(event, data) {
    document.dispatchEvent(new CustomEvent(event, { detail: data }));
  }
};

export default eventBus;

2. 错误组件监听事件 #

// CustomErrorComponent.js
import { useState, useEffect } from 'react';
import eventBus from './eventBus';

export default function CustomErrorComponent() {
  const [error, setError] = useState(null);

  useEffect(() => {
    const handleApiError = (errMsg) => setError(errMsg);
    // 监听apiError事件
    eventBus.on('apiError', handleApiError);
    
    // 组件卸载时移除监听，避免内存泄漏
    return () => document.removeEventListener('apiError', handleApiError);
  }, []);

  if (!error) return null;

  return (
    <div className="error-overlay">
      <div className="error-card">
        <h3>请求失败</h3>
        <p>{error}</p>
        <button onClick={() => setError(null)}>关闭提示</button>
      </div>
    </div>
  );
}

3. 修改Axios拦截器发送事件 #

// axiosInstance.js
import axios from 'axios';
import eventBus from './eventBus';

const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  (response) => {
    if (response.config.parse) {
      // 这里处理响应数据
    }
    return response;
  },
  (error) => {
    // 发送apiError事件
    eventBus.emit('apiError', error.message);
    return Promise.reject(error.message);
  }
);

export default axiosInstance;

4. 在根组件渲染错误组件 #

将CustomErrorComponent放到根组件（如AppContent）中，确保它始终存在于DOM中即可。

内容的提问来源于stack exchange，提问作者Gurpinder