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

yb3bgrhw  于 2022-11-29  发布在  iOS
关注(0)|答案(1)|浏览(313)

我刚刚开始研究axios和使用拦截器
在我的代码中,我到处都有axios api调用,所以我使用拦截器来处理错误,
但是它仍然在我控制台中显示未捕获的错误。我不知道这是为什么?
例如,这是我的api代码:

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

因此,为了以集中的方式处理错误,我使用拦截器来处理错误。

export const instance = axios.create()

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

但是当我得到api请求错误时,我仍然在控制台中得到一个红色错误,比如我上面提到的示例api

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, …}

但是我希望它不会再显示localhost/:1 Uncatch,因为我已经在拦截器中处理了它

9njqaruj

9njqaruj1#

您捕获了错误,但随后又抛出了它。这就是为什么控制台中仍然显示红色错误的原因。
您可以做的是捕获错误,然后返回一个对象,说明发生了错误,而不会再次抛出它。

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
    }
  }
)

相关问题