Usare gli interceptors in axios

Di axios abbiamo già parlato svariate volte, anche perchè è la libreria che uso in genere in React.

In questo articolo vediamo come usare gli interceptors; sostanzialmente ogni richiesta HTTP verrà "intercettata" e verrà eseguito/impostato un qualcosa deciso da noi.

Nell'esempio uso React, ma in verità potete usarlo dove volete.

Supponiamo di dover interrogiare una API e di dovergli mandare un token.

Questo codice sicuramente restituirà un errore dal server, in quanto non inviamo nulla:

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

function App() {

  useEffect(() => {
    axios.get('URL')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
  });

  return (
      <>
        <h1>CIAO</h1>
      </>
  );
}

export default App;

Ma possiamo fare così:

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

function App() {

  useEffect(() => {
    axios.interceptors.request.use(
        config => {
          const token = 'MY_TOKEN';
          if (token) {
            config.headers['Authorization'] = 'Bearer ' + token;
          }
          return config;
        },
        error => {
          Promise.reject(error);
        }
    );

    axios.get('URL')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
  });

  return (
      <>
        <h1>CIAO</h1>
      </>
  );
}

export default App;

Qui ho messo tutto insieme nella pagina; ovviamente dovete impostare il codice in modo da non ripeterlo.

Ve lo lascio come compito!

Enjoy!