Axios handling errors : <p>I'm trying to understand javascript promises better with Axios. What I pretend is to handle all errors in Request.js and only call the request function from anywhere without having to use <code>catch()</code>.</p>

<p>In this example, the response to the request will be 400 with an error message in JSON.</p>

<p>This is the error I'm getting:</p>

<p><code>Uncaught (in promise) Error: Request failed with status code 400</code></p>

<p>The only solution I find is to add <code>.catch(() =&gt; {})</code> in Somewhere.js but I'm trying to avoid having to do that. Is it possible?</p>

<p>Here's the code:</p>

<blockquote>
  <p>Request.js</p>
</blockquote>

<pre><code>export function request(method, uri, body, headers) {
  let config = {
    method: method.toLowerCase(),
    url: uri,
    baseURL: API_URL,
    headers: { 'Authorization': 'Bearer ' + getToken() },
    validateStatus: function (status) {
      return status &gt;= 200 &amp;&amp; status &lt; 400
    }
  }

  ...

  return axios(config).then(
    function (response) {
      return response.data
    }
  ).catch(
    function (error) {
      console.log('Show error notification!')
      return Promise.reject(error)
    }
  )
}
</code></pre>

<blockquote>
  <p>Somewhere.js</p>
</blockquote>

<pre><code>export default class Somewhere extends React.Component {

  ...

  callSomeRequest() {
    request('DELETE', '/some/request').then(
      () =&gt; {
        console.log('Request successful!')
      }
    )
  }

  ...

}
</code></pre>
