使用 request 的 axios 状态码分析

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

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

解决

1. 修改 validateStatus 配置

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

javascript 复制代码
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 的情况。

javascript 复制代码
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 范围内的响应视为错误。下面为你详细分析可能的原因及解决办法。

相关推荐
恋猫de小郭7 分钟前
AI Agent 开发究竟是啥?如何用 AI 开发 Agent ?深入浅出给你一套概念
android·前端·ai编程
前端双越老师10 分钟前
我开发 AI Agent 项目踩过的 5个坑
前端·agent·全栈
晓得迷路了31 分钟前
栗子前端技术周刊第 134 期 - React Router v8、TypeScript 7 RC、React Native 0.86...
前端·javascript·react.js
Carson带你学Android32 分钟前
Android 17 正式发布:AI 终于成了系统能力
android·前端·ai编程
Mike_jia44 分钟前
ZbxTable:Zabbix开源报表神器,从运维数据到决策洞察的最后一公里
前端
LinXunFeng10 小时前
Obsidian - 使用 Share Note 分享笔记并自部署
前端·笔记·github
乘风gg14 小时前
为什么AI 时代来临,大部分人吃不到红利
前端·ai编程·claude
恋猫de小郭14 小时前
Android 限制侧载新进展,谷歌联合国内厂商推验证计划
android·前端·flutter
IT_陈寒14 小时前
Redis内存爆了,原来我漏掉了这个致命配置
前端·人工智能·后端
恋猫de小郭14 小时前
解读 Android 17 全新内存限制,有没有“豁免”后门?
android·前端·flutter