A better way to implement axios interceptor

user_16475108 0
Viewed 393

I have figured out my previous problem and the whole code works properly, however I am interested if there is a better way to write this big function, using axios interceptor.

export const handleFetchData =
  (accessToken, refreshToken) => async (dispatch) => {
    authentification.interceptors.response.use((response) => {
      if (response.data.statusCode === 200) {
        console.log("valid");
        dispatch({ type: "USER_ME", payload: response });
      } else {
        console.log("invalid");
        axios({
          method: "post",
          url: "http://142.93.134.108:1111/refresh",
          headers: { Authorization: `Bearer ${refreshToken}` },
        }).then((res) => {
          localStorage.setItem("accessToken", res.data.body.access_token);
          localStorage.setItem("refreshToken", res.data.body.refresh_token);
          axios
            .get("http://142.93.134.108:1111/me", {
              headers: {
                Authorization: "Bearer " + localStorage.getItem("accessToken"),
              },
            })
            .then((reply) => dispatch({ type: "USER_ME", payload: reply }));
        });
      }
      return response;
    });
    await authentification.get("http://142.93.134.108:1111/me", {
      headers: {
        Authorization: "Bearer " + accessToken,
      },
    });
  };
axios reactjs
1 Answers
create a wrapper around the axios which act as the interceptor/middleware.

//interceptor.js

import axios from 'axios';

function http(method, endpoint, payload, headers) {
   switch (method){
      case 'GET':
          axios.get(endpoint).then((data, status)=>{
               if (status === 200) {
               console.log("valid");
               dispatch({ type: "USER_ME", payload: response });
          }
     //similarly for other methods POST,PUT, PATCH ...
   }

}
export default http;

in your component instead of using axios directly use this service instead

user_120539230
Related