使用 request 的 axios 状态码分析

request.interceptors.response.use(function(response){},function(error){})后端返回结果code===400不经过response,直接跳到error。

当后端返回状态码为 400 时直接进入 error 回调而不经过 response 回调,这是因为 axios 默认会将状态码不在 200 - 299 范围内的响应视为错误。

解决

1. 修改 validateStatus 配置


你可以通过修改 axios 实例的 validateStatus 配置,来改变对成功状态码的判断逻辑。

import axios from 'axios';

// 创建 axios 实例
const request = axios.create({
  // 修改 validateStatus 配置,允许 400 状态码进入 response 回调
  validateStatus: function (status) {
    return status >= 200 && status < 500; // 这里将成功状态码范围修改为 200 - 499
  }
});

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 处理响应数据
    if (response.data.code === 400) {
      // 处理 code 为 400 的情况
      console.log('后端返回 code 为 400');
    }
    return response;
  },
  function (error) {
    // 处理错误
    console.error('请求出错:', error);
    return Promise.reject(error);
  }
);

export default request;

2. 在 error 回调中处理状态码 400


如果不想修改 validateStatus 配置,也可以在 error 回调中处理状态码为 400 的情况。

import axios from 'axios';

// 创建 axios 实例
const request = axios.create();

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 处理成功响应
    return response;
  },
  function (error) {
    // 处理错误
    if (error.response && error.response.status === 400) {
      // 处理状态码为 400 的情况
      console.log('后端返回 code 为 400');
      // 可以在这里进行其他处理,如提示用户等
    }
    return Promise.reject(error);
  }
);

export default request;

总结


修改 validateStatus 配置:适用于你希望将更多状态码视为成功响应的情况,这样可以让这些状态码的响应进入 response 回调进行统一处理。
在 error 回调中处理:适用于你只想对特定状态码(如 400)进行特殊处理,而不改变 axios 对成功状态码的默认判断逻辑。
你可以根据实际需求选择合适的解决办法。 在使用 axios(推测你使用的 request 是 axios 实例)时,当后端返回状态码为 400 时直接进入 error 回调而不经过 response 回调,这是因为 axios 默认会将状态码不在 200 - 299 范围内的响应视为错误。下面为你详细分析可能的原因及解决办法。

### 鸿蒙系统中使用Axios时遇到状态码500问题的解决方案 当在鸿蒙系统中使用 `@ohos/axios` 发送网络请求并接收到服务器端返回状态码为500时,表明发生了内部服务器错误。这类问题是由于服务器无法完成请求而产生的,并不是客户端代码本身的问题[^3]。 对于这种情况下的处理方式如下: #### 1. 定义全局错误处理器 定义一个通用的错误处理器来捕获所有的HTTP响应异常情况,特别是针对不同的HTTP状态码执行特定的操作。例如,在遇到500错误时向用户显示友好的提示信息而不是让应用崩溃或卡住。 ```typescript import { AxiosError } from '@ohos/axios'; function errorHandler(error: any): void { if (error instanceof AxiosError) { const status = error?.response?.status; if (status === 500) { // 处理500错误逻辑 showToast('服务器遇到了一个问题,请稍后再试'); } } throw error; // 继续抛出以便其他地方可以捕捉到这个错误 } ``` #### 2. 使用自定义拦截器增强功能 通过配置Axios实例上的响应拦截器可以在每次接收到来自服务器的数据之前对其进行预处理。这样就可以集中管理所有可能发生的API调用失败情形,包括但不限于500 Internal Server Error。 ```javascript const instance = axios.create(); instance.interceptors.response.use( response => response, async error => { await errorHandler(error); return Promise.reject(error); } ); ``` #### 3. 日志记录与调试支持 为了更好地理解和追踪生产环境中出现的具体原因,建议集成日志服务并将详细的错误堆栈跟踪信息保存下来供后续分析。这有助于快速定位问题根源所在。 ```typescript if (process.env.NODE_ENV !== 'production') { console.error(`Request failed with status code ${error.response.status}`); console.error('Full error details:', JSON.stringify(error)); } ``` 以上措施能够有效提升用户体验的同时也便于开发者维护和排查潜在的服务端故障。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值