当前位置:

首页 > 编程开发 > 前端获取http状态码400的返回值实例

前端获取http状态码400的返回值实例

调用后端接口遇到400状态码时,仅捕获error.message无法获取具体错误信息。需在catch中通过error.response对象获取状态码、响应体及业务描述等详细数据,从而精准定位后端返回的业务错误。

本文目录

    在日常开发中,调用后端接口时,最怕遇到什么?其实不是报错,而是报错之后你拿不到有用的信息。比如,后端告诉你“手机号已存在”,返回了一个400状态码,可你的前端代码却只捕获到一个光秃秃的Error对象,连个数据都捞不着,那才叫抓狂。

    下面这段代码,就展示了如何正确地拿到400状态码背后的真实数据,而不是只看到一句“Error: Request failed with status code 400”。

    axios.get("/check_mobile_and_sent_code",{
      withCredentials:true,
      params:{mobile:formInline.mobile}
    }).then(res=>{
      console.log(res);
      // 倒计时逻辑,这里略——关键看error处理
      if (!this.timer) {
        this.count = this.TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= this.TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    }).catch(error=>{
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
      console.log('Error', error.message);
      console.log(error.config);
    })
    

    使用场景:

    当后端判断验证的手机号已存在时,会返回400状态码。这时候,如果没有在catch里正确打印error.response,你看到的只是error.message,也就是一串“400 (Bad Request)”,根本不知道具体原因。而上面的代码,通过error.response对象,就能拿到后端返回的详细数据——比如错误描述、业务码等。

    下面这张图,就是在控制台打印出来的error.response的实际内容,可以看到,状态码、请求头、响应体都清清楚楚。

    前端获取http状态码400的返回值实例

    这里有个容易踩的坑:如果直接输出error,它等于error.message,而不是完整的响应对象。一定要用error.response才能拿到后端的返回数据。

    作为对比,再来看看状态码200时的正常返回值是什么样的——

    前端获取http状态码400的返回值实例

    总结一下:处理HTTP错误时,别只盯着error.message,error.response才是你真正需要的好东西。拿到它,你就能精准定位后端返回的业务错误信息,再也不用对着400状态码干瞪眼了。

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
    作者最新文章
    编程开发
    相关文章 更多
    怎么通过 System.exit() 传递不同的状态码以通知父进程或脚本当前的执行结果变量
    怎么通过 System.exit() 传递不同的状态码以通知父进程或脚本当前的执行结果变量

    Java程序通过System.exit()传递整数退出码与父进程通信。0表示成功,非0值表示不同失败类型,如参数错误、配置失败等。Shell脚本通过$?捕获退出码并执行相应逻辑。应明确编码、避免在finally块中调用、并在日志中记录退出码。

    怎么利用 switch 分支实现对不同 HTTP 状态码的标准化业务响应映射
    怎么利用 switch 分支实现对不同 HTTP 状态码的标准化业务响应映射

    处理HTTP状态码时,推荐采用分层switch结构:先按2xx/4xx/5xx大类区分,再细化具体状态码。应使用语义化常量替代数字,每个case需完成完整业务闭环,如解析数据或跳转登录。务必设置明确的default兜底策略,并注释设计依据,以确保代码清晰可控。

    suse 10.3 安装http apche2时遇到的rpm依赖问题的解决方法
    suse 10.3 安装http apche2时遇到的rpm依赖问题的解决方法

    在SUSE 10.3中安装http apache2的依赖问题解决 在SUSE 10.3系统上安装Apache2时,很多人都会遇到一个典型的依赖错误。系统会明确提示你缺少几个关键的库文件,具体信息通常是这样: libapr1 >= 1.0 is needed by apache2-2.2.3-16.2

    Golang 测试 HTTP API 方法详解
    Golang 测试 HTTP API 方法详解

    使用httptest可高效测试GolangHTTPAPI。1.用NewRecorder模拟请求并检查状态码、响应体和头信息;2.测试路由和中间件时将ServeMux注入测试;3.用NewServer启动临时服务进行端到端验证。

    HTTP状态码大全及常见问题解析
    HTTP状态码大全及常见问题解析

    前言通过前面的总结,我们了解到,当客户端通过HTTP向服务端发送请求后,期望服务端能够作出响应。在服务端的响应中,信息头包含一个称为StatusCode的属性,其值是一个三位数字,我们称之为HTTP状态码。HTTP状态码是HTTP协议的重要组成部分,用来表示服务端对当前请求的响应状态。概念HTTP状态码(英语:HTTPStatusCode)是用来表示网页服务器HTTP协议响应状态的三位数字代码。它由RFC2616规范定义,并得到RFC2518、RFC2817、R

    WPF WrapPanel使用与布局技巧
    WPF WrapPanel使用与布局技巧

    大家好,又见面了,我是你们的朋友全栈君。WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。Orientation——根据内容自动换行。当Horizontal选项看上去类似于Windows资源管理器的缩略图视图:元素是从左向右排列的,然后自上至下自动换行。Vertical选项看上去类似于Windows资源管理器的列表视图:元素是从上向下排列的,然后从左至右自动换行。ItemHeight——所有子元素

    红队渗透测试中的文件传输方法
    红队渗透测试中的文件传输方法

    在红队渗透测试中,常常需要最大限度地利用现有环境,绕过严密防守的系统防火墙、入侵检测系统(IDS)和入侵防御系统(IPS)等监控和报警系统进行文件传输。本文将介绍多种使用操作系统自带工具进行文件传输的技巧。搭建HTTP服务器使用Python对于Python2用户:python-mSimpleHTTPServer1337

    GB28181协议是什么?是否收费?
    GB28181协议是什么?是否收费?

    在探讨GB28181协议的细节之前,让我们先了解一下与之相关的HTTP和SSDP协议的基本概念。这将帮助我们更好地理解GB28181协议的工作原理。1、HTTP协议与SSDP协议SSDP协议与HTTP协议在结构上非常相似,实际上,它们的相似之处主要在于协议内容的格式。然而,SSDP协议在使用时需要忽略端口和D类地址。当我向其他员工或面试者解释时,我总是强调深入理解HTTP协议的重要性,因为掌握了HTTP协议,理解SSDP协议就变得相对容易。许多人可能会认为HTTP协议仅仅是GET、POST、PUT、DEL

    自定义计算公式实战入门指南
    自定义计算公式实战入门指南

    本系列开启了一个全新的项目,旨在实现用户通过自定义计算公式输入一系列值(固定格式,假设为文本格式),并自动生成一系列计算后的值。这些新值将被追加到原始文本中。核心在于用户无需编程即可通过提供的UI界面操作,操作一次生成程序,以后进行同类工作无需重复操作。本项目主要涉及的模块包括traitsui和traits。Part1:目标输入:如图所示,input1.txt文本中包含一系列数值。输出:经过程序处理后,生成output1.txt,新文件是在原始文件的基础上追加了一些值,追加值的数值取决于具体的公式。这里

    如何在 Golang 中处理 HTTP 异常?
    如何在 Golang 中处理 HTTP 异常?

    如何处理HTTP异常?在Golang中,HTTP异常处理包括以下方法:自定义HTTP错误处理程序:使用http.Error自定义错误响应。内置异常处理:使用recover()恢复异常,并使用errorHandler发送错误响应。实战案例:处理无效请求:根据请求方法发送错误响应。处理服务器内部错误:使用deferrecover()捕获异常并发送错误响应。处理其他异常:通过类似的方法进行处理。

    查看更多
    精品专题 更多
    装机必备
    装机必备

    正软商城装机必备专区,精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件,帮助用户快速完成新电脑软件配置。

    Windows
    Windows

    正软商城Windows软件专区,汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件,提供软件介绍、系统要求、正版授权及购买下载服务。

    PDF教程
    PDF教程

    正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法,同时介绍常用PDF软件和工具的使用技巧。

    Mac软件 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    Aperty macOS版
    Aperty macOS版
    macOS

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    WINDOWS 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    PixTV 网页版
    PixTV 网页版
    Windows

    PixTV 是一款在浏览器中使用的 AI 视觉内容创作平台,提供图片、视频、音频、文字生成、AI 分镜、局部重绘、提示词反推和无限画布等工具,适合短剧、漫剧、广告及社交媒体内容制作。