title: Handling a Promise reject in axios interceptor
body: <p>Having trouble dealing with a specific case of an error, seems like my understanding of promises is flawed.
  Central error handling in axios interceptor, handles all my calls to the api and most of my errors, it looks like this:</p>
  
  <pre><code>export function apiFactory(vue, $security) {
    const $http = axios.create({
      baseURL: process.env.API_URL
    });
  
    $http.interceptors.request.use(function (config) {
      const token = $security.loginFrame.getToken();
  
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
  
      return config;
  
    }, function (err) {
      vue.$eventBus.$emit('toastMessageHandler', {message: error.message, type: 'error'});
      return Promise.reject(err);
    });
  
    $http.interceptors.response.use(function (response) {
  
      return response;
  
    }, function (error) {
      if (error.response &amp;&amp; error.response.status === 401) {
        vue.$eventBus.$emit('authErr', error);
      } else if (error.response &amp;&amp; error.response.status === 403) {
        alert('you are not authorized, please contact EM support');
      }
      else if (error.response &amp;&amp; error.response.status !== 409){
        vue.$eventBus.$emit('toastMessageHandler', {message: error.message, type: 'error'});
      }
  
      return Promise.reject(error);
    });
  </code></pre>
  
  <p>This works well for most cases but in one case, where I make this api call:</p>
  
  <pre><code>async createSearchTerm(term) {
        return await this.$http({
          url: `/v1/searchTerms/term`,
          method: 'POST',
          data: JSON.stringify(term)
        })
    }
  </code></pre>
  
  <p>The <code>409</code> error which I am trying to catch does not reach the component, my code in the component looks like this:</p>
  
  <pre><code> async addTag() {  //needs better error handling, make sure loader changes in cases of fail.
          if (this.newTag.length &gt; 0) {
            this.loading = true
            this.$emit('loading', true)
            const payload = {
              term: this.newTag,
              term_type: this.type,
              partner_code: this.query.partner_code,
              language: this.query.language
            }
            try {
              await this.apiFacade.createSearchTerm(payload); //this is the call directly above, it just goes through a facade.
              this.$emit('loading', false)
              this.loading = false
              this.tags.unshift(this.newTag)
              this.newTag = ''
              this.$eventBus.$emit('toastMessageHandler', {
                message: this.$t(`search_terms.add_success`),
                type: 'info'
              });
            } catch (e) { //error is undefined
              if (e.response.status === 409) {
                this.$eventBus.$emit('toastMessageHandler', {
                  message: this.$t(`search_terms.duplicate_term`),
                  type: 'error'
                });
              }
            }
          }
        },
  </code></pre>
  
  <p>It seems as though my Interceptor returns a promise and not an object therefore I cannot handle it. Ideally I wouldn't need to resolve the promise in the components rather it would just receive the error message. What is the recommended way to pass to my component the actual error so I can properly handle it?</p>
  
  <p><strong>Expected</strong> - pass the <code>error</code> object to the location where the call the fails.
  <strong>actual</strong> - <code>error</code> is undefined.</p>
  
  <p><strong>EDIT</strong> I was able to see the error and handle it when I changed the code in 2 places, in the interceptor code: 
  <code>return Promise.reject({error});</code>
  And then in the component:
  <code>catch ({error}) { //error is undefined
              if (error.response.status === 409)</code>
  I do not actually understand why this is the case? possibly because destructuring forces the promise to resolve?</p>