How to tell axios interceptors error handler to ignore 422? (Solved)

Is there a way to explicitly tell the axios Interceptors handler to ignore 422 responses? I thought 422 isn't really an error response, and I need to handle 422s from Laravel on a case-by-case basis in my Vue components. Right now with interceptors, I'm unable to do that (I'm not sure why). Any help would be much appreciated.

Talinon

3 years ago

Best Answer

Level 51

@pweil

Have you tried something like this:

axios.interceptors.response.use(
  (response) => {
			return response;
  },
  function (error) {

    if (error.response.status === 422) {
		// handle error or..
		return Promise.resolve();

    } else {
	    return Promise.reject(error.response);
	}
  }
);

```

dcranmer

3 years ago

Level 6

Ah, I forgot about the promise. Note to self to pay closer attention. Thanks!

That definitely helps, but you gave me an idea: what works even better in my situation is to throw the error at that same spot:

  axios.interceptors.response.use(
    response => {
      return response
    },
    error => {
      if (error.response.status === 422) {
        throw error
      } else {
        errorHandler(error)
      }
    }
  )

And then I can easily handle it in the component:

      try {
         [.....axios request...]
      } catch (e) {
        if (e.response.status === 422) {
          console.log(e.response.status)
          console.log(e.response.data)
          this.errors = e.response.data.errors
        }

Please or to participate in this conversation.