axios响应拦截器无法处理过期的refresh_token（401）

Question

I have the following interceptor on my axios response in App.js in ComponentDidMount() and it does not work for all axios request.

    axios.interceptors.response.use(function (response) {

        if (response)
            return response;
    }, function (error) {

        if (error.response && 401 == error.response.status) {
            console.log('401')
            return Promise.reject(error);
        }
        else {
            return Promise.reject(error);
        }
    });

When I call the API and get an 401 error, this code does not work for me. I use this code in another component and I can not handle the 401 error

  axios
  .get("/web-api/home/", { headers: headers })
  .then(response => {
    this.setState({
      homeconfig: response.data
    });
  })
  .catch((response) => {
    console.log(response);
  });

Answer 1

You have put axios interceptor set in ComponentDidMount. it is possible that a child component is calling a request before this configuration. (especially if you are calling the request in child component's constructor). Therefore, you should do this configuration before any component mount. Put your configuration in componentWillMount or constructor (I prefer the constructor because componentWillMount is going to be deprecated in newer versions of react-17).