Question

这是我在 react 应用程序中的 axios 实例。我想要做的是从服务器捕获错误并基于错误使其静音。例如，如果存在具有此名称的用户，我想消除错误并返回警报消息。但拦截器不会触发：

import axios from "axios";

const instance = axios.create({
    baseURL: "http://localhost:8000",
    withCredentials: true,
    timeout: 1000
})

instance.interceptors.request.use(
    request => request,
    error => {
        console.log(error)
        console.log(error.response)
        console.log(error.response.message)
        return { data: {  status: 'fail' } };
    }
)

export default instance

现在我只想要 console.log 它，但它仍然破坏了整个逻辑并抛出错误（（

Answer 1

您应该使用响应 interceptor (axios.interceptors.response.use) 来拦截响应并处理错误。

instance.interceptors.response.use(
  (response) => response,
  (error) => {
    console.log(error)
    // ...
  }
)

Answer 2

请求拦截器(axios.interceptors.request.use)一般用于在header中配置参数，比如

instance.interceptors.request.use(config => {
  console.log('request interceptor in here')
  config.headers = {
    ...config.headers,
    'x-requested-with': 'XMLHttpRequest'
    // other parameters...
  }
  return config
})

和响应拦截器(axios.interceptors.response.use)来拦截返回的结果或错误，比如

instance.interceptors.response.use(response => {
  console.log('success', response)
}, error => {
  console.log('fail', error)
})

如何正确使用带有 axios + react 的拦截器

2 个答案: