如何使用拦截器全局处理响应

Question

I have just started exploring axios and using interceptors

In my code, I have axios api call here and there, So I used interceptors to handle error,

but it still show uncaught error in my console. I dont know why is that?

For example, this is my api code:

export const getcountryAllocations = async (country: string) => {
  const response = await instance.get<IcountryAllocationTypeResponse[]>(
    `/asa/${country}`
  )
  return response.data
}

So, in order to handle error in a centralized way, I used interceptors to handle error.

export const instance = axios.create()

instance.interceptors.response.use(
  res => {
    return res
  },
  error => {
    if (error.response.status === 401) {
      console.log(error)
    }
    throw error
  }
)

But I still get a red error in console when I get api request error, say the example api I mentioned above

GET http://localhost:30087/asa/USD 401 (Unauthorized)

AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

localhost/:1 Uncaught (in promise) AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}

But I expect that it shouldnt display localhost/:1 Uncaught anymore, as I have handled it in interceptors

Answer 1

You are catching the error but then throwing it again. That's why you still have the red error in the console.

What you can do is catch the error and then return an object saying an error occurred without throwing it again.

export const instance = axios.create()

instance.interceptors.response.use(
  res => {
    return res
  },
  error => {
    if (error.response.status === 401) {
      console.log(error)
    }

    return {
      success: false,
      message: error.message,
      status: error.response.status
    }
  }
)