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

Posted 2023-02-23

【中文标题】如何正确使用带有 axios + react 的拦截器

【英文标题】：How correctly to use interceptorce with axios + react

【发布时间】：2021-06-16 11:18:43

【问题描述】：

这是我在 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 它，但它仍然会破坏整个逻辑并引发错误（（

【问题讨论】：

它会抛出什么错误？您是否尝试像文档显示的那样在错误回调中返回 Promise？ return Promise.reject(error);

【参考方案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)
)

【参考方案2】：

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

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