Axios 与 HTTP 状态码：构建健壮前端请求体系的完整指南

在我们日常的前端开发中，HTTP 请求就像前端的"生命线"，而状态码则是服务器与我们"对话的语言"。今天，就让我带你深入探索如何让 Axios 和 HTTP 状态码完美配合，打造一个真正健壮的前端请求体系。

一、引言：为什么我们需要关注 HTTP 状态码？

记得我刚入行时，总是简单地把 HTTP 请求分为"成功"和"失败"两种状态。直到有一次，用户反馈说在某些情况下页面"看似成功了，实际却失败了"，我才意识到正确处理 HTTP 状态码的重要性。

现状痛点：

• 70% 的前端开发者只处理 200 状态码
• 超过 50% 的应用没有正确处理 3xx 重定向
• 近 90% 的错误处理只区分"网络错误"和"服务器错误"

事实上，HTTP 状态码是服务器向我们传递请求处理结果的标准化方式，而 Axios 作为现代前端最流行的 HTTP 客户端，它们的正确配合使用直接决定了我们应用的稳定性和用户体验。

二、HTTP 状态码系统化梳理

2.1 HTTP 状态码分类体系

HTTP 状态码就像是服务器给我们写的"回信"，通过第一个数字告诉我们大致类别：

// 状态码分类常量定义
const HTTP_STATUS_CATEGORY = {INFORMATIONAL: '1xx',   // 信息响应SUCCESS: '2xx',         // 成功响应REDIRECTION: '3xx',     // 重定向CLIENT_ERROR: '4xx',    // 客户端错误SERVER_ERROR: '5xx'     // 服务器错误
};// 判断状态码类别的方法
function getStatusCategory(statusCode) {const firstDigit = Math.floor(statusCode / 100);return `${firstDigit}xx`;
}// 使用示例
console.log(getStatusCategory(200)); // "2xx"
console.log(getStatusCategory(404)); // "4xx"

2.2 详细状态码解读与应用场景

2xx 成功系列 - 请求被成功处理

// 2xx 状态码处理示例
const SUCCESS_STATUS_HANDLERS = {200: (response) => {// OK - 标准成功响应console.log('请求成功，返回完整数据');return {success: true,data: response.data,message: '操作成功'};},201: (response) => {// Created - 资源创建成功console.log('资源创建成功，通常在 POST 请求后');return {success: true,data: response.data,message: '创建成功',location: response.headers?.location // 新资源的位置};},204: (response) => {// No Content - 成功但无内容console.log('请求成功，但无返回内容');return {success: true,data: null,message: '操作成功'};}
};

实战经验：对于 204 状态码，很多开发者会困惑，其实它常见于 DELETE 请求成功或更新操作不需要返回数据时。

3xx 重定向系列 - 需要进一步操作

// 3xx 重定向处理
class RedirectHandler {constructor() {this.maxRedirects = 5;this.redirectCount = 0;}handleRedirect(response, originalRequest) {const status = response.status;const location = response.headers?.location;if (!location) {throw new Error(`收到 ${status} 状态码但缺少 Location 头信息`);}this.redirectCount++;if (this.redirectCount > this.maxRedirects) {throw new Error(`重定向次数超过限制: ${this.maxRedirects}`);}switch (status) {case 301: // Moved Permanentlycase 308: // Permanent Redirectconsole.warn(`资源已永久重定向到: ${location}`);// 可以更新本地配置或缓存break;case 302: // Foundcase 307: // Temporary Redirectconsole.log(`临时重定向到: ${location}`);break;case 303: // See Otherconsole.log(`请使用 GET 方法访问新位置: ${location}`);break;default:console.warn(`未处理的重定向状态码: ${status}`);}// 在实际项目中，这里应该重新发起请求到新位置return this.followRedirect(location, originalRequest);}followRedirect(location, originalRequest) {// 实现重定向逻辑return axios({...originalRequest,url: location,maxRedirects: this.maxRedirects - this.redirectCount});}
}

4xx 客户端错误 - 请求有问题

这是我们需要特别关注的类别，因为这些问题通常需要前端来处理：

// 4xx 错误详细处理
const CLIENT_ERROR_HANDLERS = {400: (error) => {// Bad Request - 请求参数错误const errorInfo = {code: 400,type: 'CLIENT_ERROR',message: '请求参数错误',details: error.response?.data?.errors || [],userMessage: '请检查输入的信息是否正确'};// 记录详细错误信息便于调试console.error('请求参数错误详情:', {url: error.config?.url,method: error.config?.method,params: error.config?.params,data: error.config?.data});return errorInfo;},401: (error) => {// Unauthorized - 未认证const errorInfo = {code: 401,type: 'AUTH_ERROR',message: '未认证或认证已过期',userMessage: '请重新登录',redirectTo: '/login'};// 清除本地认证信息localStorage.removeItem('authToken');sessionStorage.removeItem('userInfo');// 触发全局登出事件window.dispatchEvent(new CustomEvent('auth-expired'));return errorInfo;},403: (error) => {// Forbidden - 禁止访问return {code: 403,type: 'PERMISSION_ERROR',message: '没有访问权限',userMessage: '抱歉，您没有权限执行此操作',requiredPermissions: error.response?.data?.requiredPermissions};},404: (error) => {// Not Found - 资源不存在return {code: 404,type: 'RESOURCE_ERROR',message: '请求的资源不存在',userMessage: '您访问的内容不存在',suggestedActions: ['检查URL是否正确', '返回上一页', '回到首页']};},429: (error) => {// Too Many Requests - 请求过于频繁const retryAfter = error.response?.headers?.['retry-after'];return {code: 429,type: 'RATE_LIMIT_ERROR',message: '请求频率过高',userMessage: '操作过于频繁，请稍后再试',retryAfter: retryAfter ? parseInt(retryAfter) : 60,retryAt: new Date(Date.now() + (retryAfter ? parseInt(retryAfter) * 1000 : 60000))};}
};

5xx 服务器错误 - 服务器处理请求时出错

// 5xx 服务器错误处理
const SERVER_ERROR_HANDLERS = {500: (error) => ({code: 500,type: 'SERVER_ERROR',message: '服务器内部错误',userMessage: '服务器开小差了，请稍后再试',shouldRetry: true,retryDelay: 2000}),502: (error) => ({code: 502,type: 'GATEWAY_ERROR',message: '网关错误',userMessage: '服务暂时不可用，请稍后再试',shouldRetry: true,retryDelay: 3000}),503: (error) => ({code: 503,type: 'SERVICE_UNAVAILABLE',message: '服务不可用',userMessage: '系统维护中，请稍后再试',shouldRetry: true,retryCount: 3,retryDelay: 5000}),504: (error) => ({code: 504,type: 'TIMEOUT_ERROR',message: '网关超时',userMessage: '请求超时，请检查网络连接',shouldRetry: true})
};

三、常见误区与陷阱

在我多年的开发经验中，发现很多团队在状态码处理上存在一些共性误区：

3.1 误区一：只检查响应状态，不处理异常状态码

错误做法：

// ❌ 危险的简单处理
axios.get('/api/user').then(response => {// 只处理成功情况console.log(response.data);});

正确做法：

// ✅ 完整的错误处理
axios.get('/api/user').then(response => {// 明确检查成功状态if (response.status >= 200 && response.status < 300) {return response.data;} else {// 即使不是网络错误，也要处理非常规成功状态码throw new Error(`请求完成但状态异常: ${response.status}`);}}).catch(error => {// 统一错误处理handleApiError(error);});

3.2 误区二：忽略 3xx 重定向处理

问题场景：

// ❌ 可能丢失重定向信息
axios.get('/api/old-endpoint').then(response => {// 如果返回 301/302，这里可能不会按预期工作processData(response.data);});// ✅ 正确处理重定向
const instance = axios.create({maxRedirects: 5, // 明确设置重定向限制validateStatus: function (status) {// 确保重定向状态码也被正确处理return status >= 200 && status < 400;}
});

3.3 误区三：对 4xx 错误一概而论

// ❌ 粗糙的错误处理
axios.post('/api/data', payload).catch(error => {// 所有错误都显示同一个提示showToast('请求失败，请重试');});// ✅ 精细化的错误处理
axios.post('/api/data', payload).catch(error => {const status = error.response?.status;switch (status) {case 400:showToast('请检查输入数据是否正确');highlightInvalidFields(error.response.data.errors);break;case 401:showLoginModal();break;case 403:showToast('您没有执行此操作的权限');break;case 429:const retryAfter = error.response.headers['retry-after'];showToast(`操作过于频繁，请${retryAfter}秒后重试`);break;default:showToast('系统繁忙，请稍后再试');}});

四、Axios 默认行为深度解析

4.1 Axios 响应结构剖析

让我们深入了解 Axios 的响应对象，这是正确处理状态码的基础：

// Axios 响应对象完整结构
const axiosResponseStructure = {// 服务器返回的数据data: {},// HTTP 状态码status: 200,// 状态文本statusText: 'OK',// 响应头headers: {},// 请求配置config: {url: '/api/user',method: 'get',headers: {},timeout: 0,// ... 其他配置},// 请求对象（在 Node.js 中）request: {}
};// Axios 错误对象结构
const axiosErrorStructure = {// 错误信息message: 'Request failed with status code 404',// 在服务器有响应时存在response: {data: {},status: 404,statusText: 'Not Found',headers: {},config: {}},// 请求配置config: {},// 错误代码code: 'ERR_BAD_REQUEST'
};

4.2 Axios 的 status 验证机制

Axios 有一个重要的配置项 validateStatus，它决定了哪些状态码被认为是"成功"的：

// 默认的 validateStatus 实现
const defaultValidateStatus = function (status) {return status >= 200 && status < 300;
};// 这解释了为什么 3xx、4xx、5xx 会进入 catch 块// 自定义验证函数示例
const customValidateStatus = function (status) {// 将 404 也视为成功，便于特殊处理if (status === 404) {return true;}// 其他状态码按默认规则return status >= 200 && status < 300;
};// 应用自定义验证
const api = axios.create({validateStatus: customValidateStatus
});

五、Axios 增强策略：构建健壮请求体系

5.1 请求拦截器：统一预处理

// 创建 Axios 实例
const apiClient = axios.create({baseURL: process.env.REACT_APP_API_BASE_URL,timeout: 10000,headers: {'Content-Type': 'application/json'}
});// 请求拦截器 - 统一添加认证信息
apiClient.interceptors.request.use((config) => {// 在发送请求前做些什么const token = localStorage.getItem('authToken');if (token) {config.headers.Authorization = `Bearer ${token}`;}// 添加请求ID便于追踪config.headers['X-Request-ID'] = generateRequestId();// 记录请求日志（开发环境）if (process.env.NODE_ENV === 'development') {console.log(`🚀 发送请求: ${config.method?.toUpperCase()} ${config.url}`, {params: config.params,data: config.data});}return config;},(error) => {// 对请求错误做些什么console.error('❌ 请求配置错误:', error);return Promise.reject(error);}
);

5.2 响应拦截器：统一状态码处理

这是我们的核心增强部分：

// 响应拦截器 - 统一处理状态码
apiClient.interceptors.response.use((response) => {// 2xx 范围内的状态码都会触发该函数// 记录成功日志if (process.env.NODE_ENV === 'development') {console.log(`✅ 请求成功: ${response.status} ${response.config.url}`, response.data);}// 可以在这里对响应数据进行格式化return {success: true,data: response.data,status: response.status,headers: response.headers};},(error) => {// 超出 2xx 范围的状态码都会触发该函数// 记录错误日志console.error(`❌ 请求失败:`, {url: error.config?.url,method: error.config?.method,status: error.response?.status,message: error.message});// 处理不同类型的错误return handleApiError(error);}
);// 统一的错误处理函数
function handleApiError(error) {// 网络错误（无响应）if (!error.response) {return Promise.reject({type: 'NETWORK_ERROR',message: '网络连接错误',userMessage: '网络不稳定，请检查网络连接',originalError: error,timestamp: new Date().toISOString()});}const status = error.response.status;const errorHandlers = {...CLIENT_ERROR_HANDLERS,...SERVER_ERROR_HANDLERS};// 查找对应的错误处理器const handler = errorHandlers[status] || defaultErrorHandler;const errorInfo = handler(error);// 触发全局错误事件window.dispatchEvent(new CustomEvent('api-error', {detail: errorInfo}));return Promise.reject(errorInfo);
}// 默认错误处理器
function defaultErrorHandler(error) {return {code: error.response.status,type: 'UNKNOWN_ERROR',message: error.message,userMessage: '系统繁忙，请稍后再试',originalError: error};
}

5.3 高级特性：重试机制与缓存策略

// 高级 Axios 实例 - 包含重试和缓存
class EnhancedAxios {constructor(baseConfig = {}) {this.client = axios.create(baseConfig);this.cache = new Map();this.setupInterceptors();}setupInterceptors() {// 请求拦截器 - 缓存处理this.client.interceptors.request.use((config) => {// 检查是否启用缓存if (config.cache) {const cacheKey = this.generateCacheKey(config);const cached = this.cache.get(cacheKey);if (cached && !this.isCacheExpired(cached)) {// 直接返回缓存数据，不发起真实请求console.log('📦 使用缓存数据:', cacheKey);return Promise.reject({cached: true,data: cached.data,config});}}return config;});// 响应拦截器 - 错误重试和缓存存储this.client.interceptors.response.use((response) => {// 存储缓存if (response.config.cache) {const cacheKey = this.generateCacheKey(response.config);this.cache.set(cacheKey, {data: response.data,timestamp: Date.now(),ttl: response.config.cacheTTL || 300000 // 默认5分钟});}return response;},async (error) => {// 处理缓存命中if (error.cached) {return Promise.resolve({data: error.data,status: 200,statusText: 'OK (Cached)',headers: {},config: error.config,fromCache: true});}// 错误重试逻辑const config = error.config;// 检查是否应该重试if (this.shouldRetry(error) && (!config || !config.__retryCount)) {config.__retryCount = config.__retryCount || 0;config.__retryCount++;const retryDelay = this.calculateRetryDelay(config.__retryCount);console.log(`🔄 第 ${config.__retryCount} 次重试，延迟 ${retryDelay}ms`);// 创建新的 Promise 进行重试return new Promise(resolve => {setTimeout(() => {resolve(this.client(config));}, retryDelay);});}return Promise.reject(error);});}shouldRetry(error) {// 只在特定情况下重试if (!error.response) {return true; // 网络错误通常重试}const status = error.response.status;// 对服务器错误和限流错误进行重试return status >= 500 || status === 429;}calculateRetryDelay(retryCount) {// 指数退避策略return Math.min(1000 * Math.pow(2, retryCount), 30000);}generateCacheKey(config) {return `${config.method}:${config.url}:${JSON.stringify(config.params)}:${JSON.stringify(config.data)}`;}isCacheExpired(cacheEntry) {return Date.now() - cacheEntry.timestamp > cacheEntry.ttl;}// 代理所有 Axios 方法get(url, config = {}) {return this.client.get(url, config);}post(url, data, config = {}) {return this.client.post(url, data, config);}// ... 其他方法
}// 使用增强的 Axios 实例
const enhancedApi = new EnhancedAxios({baseURL: '/api',timeout: 15000
});// 带缓存的请求示例
enhancedApi.get('/user/profile', {cache: true,cacheTTL: 60000 // 1分钟缓存
}).then(response => {if (response.fromCache) {console.log('这是缓存数据');} else {console.log('这是新鲜数据');}
});

六、实战经验：完整项目集成

6.1 状态码处理的业务场景整合

让我们看看在实际业务中如何应用这些知识：

// 业务API服务类
class ApiService {constructor() {this.client = enhancedApi; // 使用我们之前创建的增强实例this.pendingRequests = new Map();}// 用户相关APIasync getUserProfile(userId) {const cacheKey = `user_${userId}`;try {const response = await this.client.get(`/users/${userId}`, {cache: true,cacheTTL: 120000 // 2分钟缓存});return this.transformUserData(response.data);} catch (error) {// 根据错误类型进行业务处理switch (error.type) {case 'AUTH_ERROR':this.handleAuthError();break;case 'RATE_LIMIT_ERROR':this.showRateLimitMessage(error.retryAfter);break;default:this.showErrorMessage(error.userMessage);}throw error;}}// 数据提交API - 包含乐观更新async submitFormData(formData) {const requestId = generateRequestId();try {// 乐观更新 - 先更新UI，再发送请求this.optimisticUpdate(formData);const response = await this.client.post('/submit', formData, {headers: {'X-Request-ID': requestId},timeout: 30000 // 表单提交可以设置更长超时});// 提交成功，确认更新this.confirmUpdate(response.data);this.showSuccessMessage('提交成功');return response.data;} catch (error) {// 提交失败，回滚乐观更新this.rollbackUpdate();// 特殊处理 409 Conflictif (error.code === 409) {const resolvedData = await this.handleConflict(error, formData);return resolvedData;}throw error;}}// 处理冲突（409状态码）async handleConflict(error, originalData) {const serverVersion = error.response.data.currentVersion;const clientVersion = originalData.version;// 显示冲突解决界面const userChoice = await this.showConflictResolutionDialog({serverVersion,clientVersion,serverData: error.response.data.serverData,clientData: originalData});if (userChoice === 'useServer') {// 使用服务器版本return error.response.data.serverData;} else if (userChoice === 'useClient') {// 强制使用客户端版本const response = await this.client.put('/submit', {...originalData,force: true,conflictResolved: true});return response.data;} else {// 用户取消throw new Error('CONFLICT_RESOLUTION_CANCELLED');}}// 批量请求处理async batchRequests(requests) {const batchId = generateRequestId();try {// 使用 Promise.allSettled 确保所有请求都能处理const results = await Promise.allSettled(requests.map(req => this.client.request(req).catch(error => ({ error }))));const successful = [];const failed = [];results.forEach((result, index) => {if (result.status === 'fulfilled' && !result.value.error) {successful.push({request: requests[index],response: result.value});} else {const error = result.status === 'rejected' ? result.reason : result.value.error;failed.push({request: requests[index],error});}});// 记录批量请求结果this.logBatchResult(batchId, successful.length, failed.length);return {batchId,successful,failed,total: requests.length,successRate: successful.length / requests.length};} catch (error) {console.error(`批量请求 ${batchId} 失败:`, error);throw error;}}// 文件上传 - 特殊状态码处理async uploadFile(file, onProgress) {const formData = new FormData();formData.append('file', file);try {const response = await this.client.post('/upload', formData, {headers: {'Content-Type': 'multipart/form-data'},timeout: 0, // 文件上传不设超时onUploadProgress: (progressEvent) => {const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);onProgress?.(percentCompleted);}});// 处理不同的成功状态码if (response.status === 201) {console.log('文件上传成功，新资源已创建');return response.data;} else if (response.status === 202) {console.log('文件已接受处理，但尚未完成');return this.pollProcessingStatus(response.data.processingId);} else {return response.data;}} catch (error) {// 特殊处理 413 Payload Too Largeif (error.code === 413) {this.showFileTooLargeError(file.size, error.response.data.maxSize);throw new Error('FILE_TOO_LARGE');}// 处理 415 Unsupported Media Typeif (error.code === 415) {this.showUnsupportedFileTypeError(file.type);throw new Error('UNSUPPORTED_FILE_TYPE');}throw error;}}// 辅助方法transformUserData(userData) {// 数据转换逻辑return {...userData,displayName: `${userData.firstName} ${userData.lastName}`,avatarUrl: userData.avatar || '/default-avatar.png'};}showRateLimitMessage(retryAfter) {// 显示友好的限流提示const message = `操作过于频繁，请 ${retryAfter} 秒后再试`;this.showNotification(message, 'warning');}logBatchResult(batchId, successCount, failCount) {console.log(`批量请求 ${batchId} 完成: 成功 ${successCount}, 失败 ${failCount}`);}
}

6.2 Vue/React 集成示例

React Hook 集成

// useApi.js - React Hook for API calls
import { useState, useEffect, useCallback } from 'react';
import { apiService } from './api-service';export function useApi(apiCall, immediate = true) {const [data, setData] = useState(null);const [loading, setLoading] = useState(immediate);const [error, setError] = useState(null);const [status, setStatus] = useState(null);const execute = useCallback(async (...params) => {setLoading(true);setError(null);setStatus('pending');try {const result = await apiCall(...params);setData(result);setStatus('success');return result;} catch (err) {setError(err);setStatus('error');// 根据错误类型进行特殊处理if (err.type === 'AUTH_ERROR') {// 重定向到登录页window.location.href = '/login';}throw err;} finally {setLoading(false);}}, [apiCall]);useEffect(() => {if (immediate) {execute();}}, [execute, immediate]);return {data,loading,error,status,execute,isIdle: status === null,isPending: status === 'pending',isSuccess: status === 'success',isError: status === 'error'};
}// 使用示例
function UserProfile({ userId }) {const { data: user, loading, error,status } = useApi(() => apiService.getUserProfile(userId), true);if (loading) return <div>加载中...</div>;if (error) return <div>错误: {error.userMessage}</div>;if (!user) return <div>用户不存在</div>;return (<div><h1>{user.displayName}</h1><img src={user.avatarUrl} alt="头像" /></div>);
}

Vue Composition API 集成

// useApi.js - Vue Composition API
import { ref, computed } from 'vue';
import { apiService } from './api-service';export function useApi(apiCall, immediate = true) {const data = ref(null);const loading = ref(immediate);const error = ref(null);const status = ref(null);const execute = async (...params) => {loading.value = true;error.value = null;status.value = 'pending';try {const result = await apiCall(...params);data.value = result;status.value = 'success';return result;} catch (err) {error.value = err;status.value = 'error';// 错误处理if (err.type === 'AUTH_ERROR') {router.push('/login');}throw err;} finally {loading.value = false;}};const isIdle = computed(() => status.value === null);const isPending = computed(() => status.value === 'pending');const isSuccess = computed(() => status.value === 'success');const isError = computed(() => status.value === 'error');if (immediate) {execute();}return {data,loading,error,status,execute,isIdle,isPending,isSuccess,isError};
}

七、监控与调试

7.1 请求监控面板

// 请求监控工具
class RequestMonitor {constructor() {this.requests = [];this.stats = {total: 0,success: 0,clientErrors: 0,serverErrors: 0,networkErrors: 0};this.setupMonitoring();}setupMonitoring() {// 监听所有 API 错误事件window.addEventListener('api-error', (event) => {this.recordError(event.detail);});// 监听页面卸载，上报未完成的请求window.addEventListener('beforeunload', () => {this.reportPendingRequests();});}recordRequest(config) {const requestRecord = {id: config.headers['X-Request-ID'],url: config.url,method: config.method,startTime: Date.now(),status: 'pending'};this.requests.push(requestRecord);this.stats.total++;return requestRecord;}recordResponse(response, requestRecord) {if (requestRecord) {requestRecord.endTime = Date.now();requestRecord.duration = requestRecord.endTime - requestRecord.startTime;requestRecord.status = 'success';requestRecord.statusCode = response.status;this.stats.success++;}}recordError(error) {const category = this.getErrorCategory(error);this.stats[`${category}Errors`]++;// 上报错误到监控系统this.reportToMonitoringSystem(error);// 在开发环境显示错误通知if (process.env.NODE_ENV === 'development') {this.showErrorNotification(error);}}getErrorCategory(error) {if (error.type === 'NETWORK_ERROR') return 'network';if (error.code >= 400 && error.code < 500) return 'client';if (error.code >= 500) return 'server';return 'unknown';}showErrorNotification(error) {const notification = {title: `API Error: ${error.code || 'Unknown'}`,message: error.message,type: 'error',timestamp: new Date()};console.group('🚨 API Error Notification');console.log('Title:', notification.title);console.log('Message:', notification.message);console.log('Details:', error);console.groupEnd();// 在实际项目中可以集成到 UI 通知系统}getPerformanceReport() {const successfulRequests = this.requests.filter(r => r.status === 'success');const averageDuration = successfulRequests.length > 0 ? successfulRequests.reduce((sum, r) => sum + r.duration, 0) / successfulRequests.length: 0;return {totalRequests: this.stats.total,successRate: this.stats.success / this.stats.total,averageDuration,errorBreakdown: {clientErrors: this.stats.clientErrors,serverErrors: this.stats.serverErrors,networkErrors: this.stats.networkErrors},slowRequests: successfulRequests.filter(r => r.duration > 1000)};}
}// 使用监控
const monitor = new RequestMonitor();

八、总结与最佳实践

经过我们这一番深入的探索，相信你已经对 Axios 和 HTTP 状态码的配合使用有了全面的理解。让我最后总结一下关键要点：

8.1 核心最佳实践

1. 永远不要假设请求一定会成功：即使是简单的 GET 请求，也要有错误处理
2. 精细化处理不同状态码：4xx 和 5xx 错误需要区别对待
3. 用户体验优先：给用户提供明确、友好的错误信息
4. 监控和日志必不可少：没有监控的系统就是在"盲开"
5. 适度的重试机制：对可重试的错误进行智能重试

8.2 性能与稳定性平衡

// 配置建议
const optimalConfig = {// 网络良好的情况下fastNetwork: {timeout: 10000,retryCount: 2,retryDelay: 1000},// 移动网络或不稳定网络slowNetwork: {timeout: 30000,retryCount: 3,retryDelay: 2000},// 关键操作（如支付）criticalOperation: {timeout: 60000,retryCount: 5,retryDelay: 3000}
};

8.3 持续优化方向

1. 根据实际业务调整超时时间
2. 分析错误日志，针对性优化
3. 建立 API 健康检查机制
4. 考虑实现电路熔断器模式
5. 定期更新错误处理策略

参考资料

1. MDN Web Docs - HTTP 状态码
2. Axios 官方文档
3. RFC 7231 - HTTP/1.1 语义和内容
4. Google Cloud API 设计指南
5. Microsoft REST API 指南