网络与请求级错误

Axios 的错误回调主要可以分为三大类：网络/请求级错误、HTTP 状态码错误（如 401、502）以及配置/取消类错误。

🌐 网络与请求级错误

这类错误发生在请求无法成功发出或没有收到服务器响应时。此时，错误对象中通常没有error.response属性。

📡 HTTP 状态码错误 (4xx, 5xx)

当请求成功发送，但服务器返回了一个非 2xx的 HTTP 状态码时，Axios 会将其视为错误。此时，错误对象中包含error.response对象。

• 4xx 客户端错误：请求有问题。

  • 400 (Bad Request)：请求参数错误。
  • 401 (Unauthorized)：未授权，通常需要重新登录。
  • 403 (Forbidden)：禁止访问，权限不足。
  • 404 (Not Found)：请求的资源不存在。

• 5xx 服务端错误：服务器处理请求时出错。

  • 500 (Internal Server Error)：服务器内部错误。
  • 502 (Bad Gateway)：网关错误。
  • 503 (Service Unavailable)：服务不可用。
  • 504 (Gateway Timeout)：网关超时。

注意，特殊情况下withCredentials: true可能导致 401 等错误被归类为ERR_NETWORK。

⚙️ 配置、请求与取消错误

这类错误与请求的配置、构造过程或用户主动取消有关。

• ERR_BAD_OPTION/ERR_BAD_OPTION_VALUE: 提供给 Axios 的配置选项无效。
• ERR_BAD_REQUEST: 请求格式有误或缺少必要参数。
• ERR_BAD_RESPONSE: 服务器响应无法被正常解析。
• ERR_FR_TOO_MANY_REDIRECTS: 请求重定向次数超过最大限制。
• ERR_CANCELED: 请求被用户主动取消。
• ERR_INVALID_URL: 提供的 URL 无效。
• ERR_NOT_SUPPORT: 当前环境不支持该特性或方法。

💎 总结与实践

在实际开发中，可以通过检查error对象来区分错误类型并作出对应处理，例如：

axios.get('/api/data').catch(error=>{if(error.response){// 1. 服务器响应了，但状态码不是 2xxconsole.log('HTTP 错误:',error.response.status);if(error.response.status===401){/* 跳转登录 */}if(error.response.status===502){/* 提示服务暂时不可用 */}}elseif(error.request){// 2. 请求已发出，但没有收到响应 (网络层错误)console.log('网络错误:',error.code);// 可能是 ERR_NETWORK 等}else{// 3. 在发送请求前就触发了错误 (配置错误等)console.log('请求配置错误:',error.message);}});

importaxiosfrom"axios";import{MessageBox,Message}from"element-ui";importcookiefrom"js-cookie";// 创建axios实例constservice=axios.create({baseURL:"http://localhost:9001",// api的base_urltimeout:20000,// 请求超时时间});// http request 拦截器service.interceptors.request.use((config)=>{//debuggerif(cookie.get("guli_token")){config.headers["token"]=cookie.get("guli_token");}returnconfig;},(err)=>{returnPromise.reject(err);});// http response 拦截器service.interceptors.response.use((response)=>{//debuggerif(response.data.code==28004){console.log("response.data.resultCode是28004");// 返回 错误代码-1 清除ticket信息并跳转到登录页面//debuggerwindow.location.href="/login";return;}else{if(response.data.code!==20000){//25000：订单支付中，不做任何提示if(response.data.code!=25000){Message({message:response.data.message||"error",type:"error",duration:5*1000,});}}else{returnresponse;}}},(error)=>{debugger;// 网络/请求级错误、HTTP 状态码错误if(error.response){// 请求成功发送，但服务器返回了一个非 2xx 的 HTTP 状态码时，Axios 会将其视为错误。此时，错误对象中包含 error.response 对象。// 400 (Bad Request)：请求参数错误。// 401 (Unauthorized)：未授权，通常需要重新登录。// 403 (Forbidden)：禁止访问，权限不足。// 404 (Not Found)：请求的资源不存在。// 500 (Internal Server Error)：服务器内部错误。// 502 (Bad Gateway)：网关错误。// 503 (Service Unavailable)：服务不可用。// 504 (Gateway Timeout)：网关超时。if(error.response.status===401){// 401 Unauthorizedconsole.log("401 Unauthorized: 用户未授权或登录已过期。");}elseif(error.response.status===403){// 403 Forbiddenconsole.log("403 Forbidden: 用户权限不足，禁止访问。");}elseif(error.response.status===404){// 404 Not Foundconsole.log("404 Not Found: 请求的资源不存在。");}elseif(error.response.status===500){// 500 Internal Server Errorconsole.log("500 Internal Server Error: 服务器内部错误。");}elseif(error.response.status===502){// 502 Bad Gatewayconsole.log("502 Bad Gateway: 网关错误。");}elseif(error.response.status===503){// 503 Service Unavailableconsole.log("503 Service Unavailable: 服务不可用。");}elseif(error.response.status===504){// 504 Gateway Timeoutconsole.log("504 Gateway Timeout: 网关超时。");}else{console.log(`HTTP 错误: 状态码${error.response.status}, 信息:${error.response.statusText}`);}}else{// 处理网络错误// ERR_NETWORK 网络连接中断、DNS 解析失败、CORS 策略阻止、服务器无响应等// ECONNABORTED 由 Axios 配置的 timeout 触发// ETIMEDOUT 请求超时（操作系统/底层网络触发）//ECONNRESET 防火墙/安全组阻断if(error.message.includes("Network Error")){Message.error("网络错误，请检查您的网络连接。");}elseif(error.message.includes("timeout")){Message.error("请求超时，请稍后再试。");}elseif(error.message.includes("ECONNABORTED")){Message.error("请求被中止，请稍后再试。");}elseif(error.message.includes("ETIMEDOUT")){Message.error("请求超时，请稍后再试。");}elseif(error.message.includes("ECONNRESET")){Message.error("连接被重置，请检查防火墙或安全组设置。");}else{Message.error(`未知网络错误:${error.message}`);}}// 配置、请求与取消错误//这类错误与请求的配置、构造过程或用户主动取消有关。// ERR_BAD_OPTION / ERR_BAD_OPTION_VALUE: 提供给 Axios 的配置选项无效。// ERR_BAD_REQUEST: 请求格式有误或缺少必要参数。// ERR_BAD_RESPONSE: 服务器响应无法被正常解析。// ERR_FR_TOO_MANY_REDIRECTS: 请求重定向次数超过最大限制。// ERR_CANCELED: 请求被用户主动取消。// ERR_INVALID_URL: 提供的 URL 无效。// ERR_NOT_SUPPORT: 当前环境不支持该特性或方法。//处理配置错误if(error.code==="ERR_BAD_OPTION"||error.code==="ERR_BAD_OPTION_VALUE"){console.error("请求配置错误，请检查 Axios 配置。",error.message);}elseif(error.code==="ERR_BAD_REQUEST"){console.error("请求格式有误或缺少必要参数。",error.message);}elseif(error.code==="ERR_BAD_RESPONSE"){console.error("服务器响应无法被正常解析。",error.message);}elseif(error.code==="ERR_FR_TOO_MANY_REDIRECTS"){console.error("请求重定向次数超过最大限制。",error.message);}elseif(error.code==="ERR_CANCELED"){console.warn("请求被用户主动取消。",error.message);}elseif(error.code==="ERR_INVALID_URL"){console.error("提供的 URL 无效。",error.message);}elseif(error.code==="ERR_NOT_SUPPORT"){console.error("当前环境不支持该特性或方法。",error.message);}returnPromise.reject(error);});exportdefaultservice;