Question

如何正确使用 Interceptorce 与 axios + React

2021-03-19

870

reactjs axios

这是我在 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

请求拦截器 (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)
})

Answer 2

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

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