如何访问Axios Interceptor中的UseContext

Question

我创建了一个Axios实例和notificationContext用于React WebApp中的使用。 我想访问addnotification在创建Axios实例的request> request> replections interceptor内的函数，但由于这不是一个反应组件，因此不可能。有没有办法将此创建的Axios实例和拦截器作为React组件制作和使用？

notificationcontext.js

import React, { createContext, useState } from 'react';

const NotificationContext = createContext();

const NotificationProvider = ({ children }) => {
    const [notifications, setNotifications] = useState([]);

    const addNotification = (type, title, description) => {
        const notification = {
            id: Date.now(),
            type,
            title,
            description,
        };

        setNotifications([notification, ...notifications]);
    };

    const removeNotification = (id) => {
        setNotifications(notifications.filter((notification) => notification.id !== id));
    };

    return <NotificationContext.Provider value={{ notifications, addNotification, removeNotification }}>{children}</NotificationContext.Provider>;
};

export { NotificationContext, NotificationProvider };

app.js

notification -provider围绕着notificationList consement

const App = () => (
    <BrowserRouter>
        <AuthProvider>
            <NotificationProvider>
                <NotificationList />
                <Router />
            </NotificationProvider>
        </AuthProvider>
    </BrowserRouter>
);

export default App;

apiclient.js

import axios from 'axios';
// import { useContext } from 'react';
// import { NotificationContext } from '../context/NotificationContext';

const apiClient = axios.create({
    baseURL: process.env.REACT_APP_API,
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    withCredentials: true,
    timeout: 10000,
});

apiClient.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        return Promise.reject(error);
        // How to access AddNotification here
    },
);

apiClient.interceptors.response.use(
    (response) => {
        return Promise.resolve(response);
    },
    (error) => {
        if (!error.response) {
            // network error
            // console.log('Network error');
            // How to access AddNotification here
        } else {
            const response = error.response.data;
            // How to access AddNotification here
        }

        return Promise.reject(error);
    },
);

export default apiClient;

Answer 1

1. 您可以导出AXIOS实例
2. 创建功能组件
3. 访问USEMEMO示例中的上下文
4. Init Interceptor

（仅是一个想法）：

function Interceptor({children}) { 
  const {addNotification} = useContext(NotificationContext)
  useMemo(() => {
    apiClient.interceptors.response.use(
      (response) => {
      return Promise.resolve(response);
      },
     (error) => {
      if (!error.response) {
         addNotification()
      } else {
        const response = error.response.data;
        addNotification()
      }
      return Promise.reject(error);
      },
   );
  }, [addNotification])
return <>{children}</>
}

app.js中

const App = () => (
<BrowserRouter>
    <AuthProvider>
        <NotificationProvider>
            <Interceptor> // here
                <NotificationList />
                <Router />
            <Interceptor />
        </NotificationProvider>
    </AuthProvider>
</BrowserRouter>);

export default App;