title: Axios - Interceptors not working on request error - 401 code
body: <p>I have a simple react app that is using a third API to fetch data. Before making any requests, a token must be retrieved in order to use it in the headers. This token is created by using the same API by passing the client id and secret id - the API is Artsy API. This token has an expiration date so this API must be requested if the token doesn't not exist. After getting the token, then I can call other requests without a problem.</p>
  
  <p>I have set up the API requests in a separate file, like so:
  Apis.js</p>
  
  <pre><code>import Axios from 'axios';
  const baseURL = 'https://api.artsy.net/api';
  
  // set up xap-token and set tot default headers
  const instance = Axios.create({
      baseURL: baseURL + '/tokens/xapp_token',
      params: {
          'client_id': process.env.CLIENTID,
          'client_secret': process.env.CLIENTSECRET
      }
  });
  
  instance.interceptors.request.use(undefined, err =&gt; {
      const status = err.response ? err.response.status : null;
      console.log("auth",err.response)
  
      if(status === 401){
          console.log("auth",err.response)
          return 'hello'
          // this.getAuthToken();
      }
  });
  
  export default{
  
      getArtworks: function(){
          return new Promise((resolve, reject) =&gt; {
              instance.get(baseURL + '/artworks')
              .then(res =&gt; {
                  resolve(res)
              })
              .catch(err =&gt; {
                  reject(err);
              });
          });
      },
  
      getArtists: function(){
          return new Promise((resolve, reject) =&gt; {
              instance.get(baseURL + '/artists')
              .then(res =&gt; {
                  resolve(res)
              })
              .catch(err =&gt; {
                  reject(err);
              });
          });
  
      },
  
      getTest: function(){
          return 'hello';
      }
  };
  </code></pre>
  
  <p>Not really sure how to use the <code>create</code> and <code>interceptors</code>, but I created an Axios instance. So the idea is to create some sort of middleware, create an instance and then use it as an interceptor if there is a request on that error.  If there is, then apply the token to that instance and proceed with the request, <code>retry</code>.  Also not sure how to set the the token in the instance.</p>
  
  <p>So far I'm getting a 401 error in the <code>getArtists</code> method, this api gets called when the page loads, it's under <code>componentDidMount</code>.</p>
  
  <p>App.jsx</p>
  
  <pre><code>import React, { Component } from 'react';
  import Apis from './utils/Api';
  import Gallery from './components/Gallery';
  
  class App extends Component{
      constructor(props){
          super(props);
          this.state = {
              artWorks: []
          }
      }
  
      componentDidMount = () =&gt; {
          // Apis.getArtists();
          Apis.getArtists().then(res =&gt; {
              console.log(res)
              // this.setState({
              //     artWorks: res.data
              // })
          });
      }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;Gallery artists={this.state.artWorks}/&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default App;
  </code></pre>
  
  <p>This is the <a href="https://developers.artsy.net/v2/docs/authentication" rel="nofollow noreferrer">api</a> doc links for authentication.</p>
  
  <p>Can anybody help? not really sure how to use the instance as a "middleware"? new to Axios.  I would like to avoid 3rd library middleware, I prefer to learn in a manual way than using 3rd libraries.  Your help will be much appreciated</p>
  
  <p><strong>Update:</strong></p>
  
  <p>I was able to get this somewhat working, i modified the <code>instance.interceptor</code>:</p>
  
  <pre><code>instance.interceptors.response.use(undefined, err =&gt; {
      const status = err.response ? err.response.status : null;
      if(status === 401){
          console.log("auth",err.response)
  
          instance.post(err.config.authURL, err.config.auth).then(res =&gt; {
              let token = res.data.token;
              err.config.headers['X-XAPP-Token'] = token;
              console.log('calling',err.response)
              return instance.request(err.config)
          });
      }
  
      // return Promise.reject(err);
  });
  </code></pre>
  
  <p>But I'm getting undefined in the <code>getArtists</code> response. Not sure what's going on here.  Here is a screenshot of the console:</p>
  
  <p><a href="https://i.stack.imgur.com/PNSg7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PNSg7.png" alt="enter image description here"></a></p>