ReactJS Axios 拦截器响应/请求

Question

I have a problem on using the axios interceptor in my react app. I want to achieve putting the header token just once in my react app. So thats why Im putting it in the interceptor. At the same time, i also want to have just one declaration to get the error. So i dont need to show the error in every page. I'm wondering if i'm using it correctly in my code below? Is there a way that i can shorten it cause i'm declaring it twice for response and request?

export function getAxiosInstance() {
  if (axiosInstance === null) {
    axiosInstance = axios.create({
      baseURL: API_URL,
    });
  }
  axiosInstance.interceptors.request.use(
    (config) => {
      if (config.baseURL === API_URL && !config.headers.Authorization) {
        const token = store.getState().auth.access_token;
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
          console.log(config);
        }
      }
      return config;
    },
    (error) => {
      console.log(error);
      store.dispatch(setAPIErrorMessage(error.message));
      return Promise.reject(error);
    }
  );
  axiosInstance.interceptors.response.use(
    (config) => {
      if (config.baseURL === API_URL && !config.headers.Authorization) {
        const token = store.getState().auth.access_token;
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
          console.log(config);
        }
      }
      return config;
    },
    (error) => {
      console.log(error);
      store.dispatch(setAPIErrorMessage(error.message));
      return Promise.reject(error);
    }
  );
  return axiosInstance;
}

Answer 1

You don't need to set authorization header in interceptors.response, you only need this in request interceptor.

You could declare your error handling in a closure function (with the action dispatch) to avoid repeating yourself.

I would also suggest to avoid handling errors directly in axios instance. You could define async redux actions using https://github.com/reduxjs/redux-thunk , and handle network errors at redux level (using fetchBegin, fetchSuccess, fetchFailure actions pattern). Then axios setup and redux setup would not be coupled anymore, which will allow you to change these tools in the future.