Crochets React dans les intercepteurs Axios

Comme vous le savez, vous ne pouvez pas utiliser les crochets React à un endroit autre que le composant React ou les crochets personnalisés.

Dans cet article, vous apprendrez à utiliser les hooks dans les intercepteurs Axios.

Tout d'abord, créez un projet React.

yarn create react-app hooks-in-axios-interceptors

// or

npx create-react-app hooks-in-axios-interceptors

Créez ensuite une instance Axios avec une configuration personnalisée.

import axios from 'axios';

const instance = axios.create({
    baseURL: "https://example.com"
})

export default instance;

Comme nous avons besoin du composant React pour utiliser les crochets, écrivons un composant ici.

import axios from 'axios';

let instance = axios.create({
    baseURL: "https://example.com"
}) 

function AxiosInterceptor({children}) {
    return children;
}

export default instance;
export {AxiosInterceptor}

L'ajout d'un intercepteur dans un composant est un effet secondaire, nous obtenons donc l'aide de useEffect crochet.

Ajouter les intercepteurs à l'instance Axios dans le useEffect .

Remarque :vous devez supprimer les intercepteurs dans useEffect déclaration de retour, car chaque exécution de useEffect , ajoute un nouvel intercepteur à l'instance Axios.

import axios from 'axios';
import { useEffect } from 'react'

const instance = axios.create({
    baseURL:  "https://example.com"
})

const AxiosInterceptor = ({ children }) => {

    useEffect(() => {

        const resInterceptor = response => {
            return response;
        }

        const errInterceptor = error => {
            return Promise.reject(error);
        }


        const interceptor = instance.interceptors.response.use(resInterceptor, errInterceptor);

        return () => instance.interceptors.response.eject(interceptor);

    }, [])
    return children;
}


export default instance;
export { AxiosInterceptor }

Maintenant, vous pouvez importer les crochets prévus et les utiliser dans le gestionnaire d'intercepteurs.
par exemple, si vous souhaitez rediriger la requête qui revient avec le code de statut 401, vers la page de connexion, vous pouvez utiliser le useNavigate hook ( de react-router-dom ) ou utilisez le useRouter hook (depuis le prochain/routeur).

import axios from 'axios';
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const instance = axios.create({
    baseURL:  "https://example.com"
})

const AxiosInterceptor = ({ children }) => {

    const navigate = useNavigate();

    useEffect(() => {

        const resInterceptor = response => {
            return response;
        }

        const errInterceptor = error => {

            if (error.response.status === 401) {
                navigate('/login');
            }

            return Promise.reject(error);
        }


        const interceptor = instance.interceptors.response.use(resInterceptor, errInterceptor);

        return () => instance.interceptors.response.eject(interceptor);

    }, [navigate])

    return children;
}


export default instance;
export { AxiosInterceptor }

Remarque :comme nous ne voulons pas détruire le comportement SPA de notre application, nous n'utilisons pas window.location pour la redirection.

Enfin, nous encapsulons l'application avec le composant intercepteur Axios.

import { AxiosInterceptor } from './axios'
import ThemeProvider from './theme-context'
import AuthProvider from './auth-context'

function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <AxiosInterceptor>
          <div>
            App
          </div>
        </AxiosInterceptor >
      </AuthProvider>
    </ThemeProvider>
  );
}

export default App;

Remarque :si vous souhaitez accéder aux autres données de contexte, le composant intercepteur Axios doit être l'enfant des fournisseurs de contexte.

Exemple de Codesandbox

conclusion

De cette façon, vous pouvez facilement utiliser les hooks React dans les intercepteurs Axios.