当前位置：首页 > news >正文

axios响应发生错误时的情况列表

news 2025/10/25 13:58:26

import axios from 'axios';
import toast from 'react-hot-toast';
import { getNavigate } from './navigateHelper'; // 如果有全局 navigate 管理（可选）const instance = axios.create({baseURL: '/api',timeout: 10000, // 10 秒超时
});instance.interceptors.response.use((response) => response,(err) => {// === 网络层错误（没有收到任何响应） ===if (!err.response) {if (axios.isCancel(err)) {console.warn('请求被取消:', err.message);} else if (err.code === 'ECONNABORTED') {toast.error('请求超时，请稍后重试');} else if (err.message === 'Network Error') {toast.error('网络错误，请检查网络或服务器连接');} else {toast.error(`未知网络错误: ${err.message}`);}return Promise.reject(err);}// === 服务器有返回，但状态码是错误的 ===const status = err.response.status;const message =err.response.data?.message ||err.response.statusText ||'请求失败，请稍后重试';switch (status) {case 400:toast.error(`请求参数错误: ${message}`);break;case 401:toast.error('登录已过期，请重新登录');const navigate = getNavigate?.();if (navigate) {navigate('/login');} else {window.location.href = '/login';}break;case 403:toast.error('没有权限访问该资源');break;case 404:toast.error('请求的资源不存在');break;case 408:toast.error('请求超时，请稍后重试');break;case 500:toast.error('服务器内部错误，请稍后再试');break;case 502:case 503:case 504:toast.error('服务器暂时不可用，请稍后重试');break;default:toast.error(`请求错误 (${status}): ${message}`);}return Promise.reject(err);}
);export default instance;

说明：

!err.response → 请求没有得到响应（网络、CORS、超时等）
axios.isCancel(err) → 判断是否主动取消请求
err.code === 'ECONNABORTED' → 请求超时
err.response.status → HTTP 状态码（如 404、500）

可选优化建议：

添加全局错误上报（例如发送到 Sentry）：

import * as Sentry from '@sentry/react';
Sentry.captureException(err);

根据环境动态关闭 toast：

```
if (process.env.NODE_ENV === 'development') {console.error('Axios Error:', err);
}
```
统一返回格式：
可以让所有接口都返回 { success, data, message }，在 response 拦截器中统一判断。