How can I use Axios interceptors in Nuxt.js?

How can I use Axios interceptors in Nuxt.js?

You can use Axios interceptors in Nuxt.js to handle requests and responses globally. This allows you to modify requests before they are sent or handle responses before they are processed by your application.

Can you show me a code example?

Sure! You can create a plugin in your Nuxt.js project. Here's a simple example:

// plugins/axios.js
export default function ({ $axios }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
    return config
  })

  $axios.onResponse(response => {
    console.log('Response:', response)
    return response
  })
}

Then, register this plugin in your nuxt.config.js.

What if I want to handle errors globally?

You can use the onError interceptor to handle errors globally. Here's how you can do it:

$axios.onError(error => {
  const code = parseInt(error.response && error.response.status);
  if (code === 400) {
    console.error('Bad Request');
  }
});