做好程序中的axios错误提示

news2025/1/24 6:43:01

今天外包组的项目客户反馈老是出错,一看页面卡在加载数据过程中,前后台分离之后,页面变得很奇怪,脸面都出来了,就是没有具体值。

初级程序员在很长一段时间要经历一个升级过程,写的程序首先是写画面,然后才能升级成写过程,再是写程序。

过程和程序的区别

过程是指对项目过程的一次程序化翻译,从正常的入口开始,可以完成整体业务流程。程序员处理需求通常接受的就是一个个过程,敏捷开发里有个时髦的词叫User Story。

现有从用户交流到设计出图到程序设计的过程中,这样的做法其实很容易把业务流程进行拆解,程序员拿到设计稿或设计文档后,很容易觉得系统就是由一系列的过程决定的。

但其实程序是要反着来看的。想象设计稿是一系列的子弹,我们要做的系统是要承接这些子弹的巨人,巨人的目的是屹立不倒。

为什么这么说呢:

  1.  系统要有自己的手脚眼,不是一系列子弹的堆叠
  2. 系统要有抵挡能力,要知道子弹不长眼,不一定就按他设计的线路来。

这两点程序员和开发经理要清楚,因为有关错误的需求描述,很大的可能性,需求列表里提都没提,你要去要求产品完全描述么?我觉得不现实,而且反过来讲,设计好一个巨人可能是做好程序的一个关键。

为什么?

1、他大概率是程序员减少bug量的关键

我们通常都要留意到,以下的地方是常见性错误的出现点:

1)网络交互(timeout等是常见错误,不能100%避免,用户带宽有差异,带来的体验也千差万别)

2)用户交互(该单击的,双击;该点确认的直接关闭)

在这些地方开发过程中充分考虑try-catch和ifelse进行错误预处理,能减少大量的bug出现,也就是说,程序员需要知道错误请求的适当包装和处理不是附加流程,而应该被作为默认流程来看待。

2、他大概率是程序员快速修正bug的关键

如果bug真的出现了,也不要专注于出错流程怎么修正,也要从巨人的角度想,为什么这个错会出现?那怎么提升会减少类似错误出现?同时,利用bug清楚用户遇到了什么样的问题,配套增强界面提示中的提示,也是很重要的工作。

如果是一个模块级别的交互错误,bug修正中,出错一方要修正错误功能,同时受错一方要提示该错误的信息反馈和容错机制。确保即使在出错情况下,用户仍然能获得正常的错误信息内容。

怎么做?

对常见错误进行逻辑包装其实简单又有效,对于初级前端研发来讲,我们可以关注下面的两个点:

  1. 对axios附加timeout设置
  2. 对axios的then操作附加catch或者finally进行错误处理

timeout设置可以确保后台超时不会造成前端流程卡死,为axios的then添加catch或者finally可以保证我们在遇到超时或者错误的then处理都会有错误处理逻辑,Javascript Promise的catch很有意思,如果then中有代码错误,例如你要获得某个数据,但是如果数据库出现任何错误,很容易出现undefined错误,这时,这种错误都会被catch所捕获,因此,添加catch不仅可以让我们处理网络错误,连一般的程序错误也可以避免。

对于所有Promise,catch都是有效的

需要注意的是catch的使用对于所有Promise都是一样的,以下面的程序为例:

Promise.resolve(true).then(()=>{console.log(a.b)}).catch(err=>{console.log("error happened",err)})

上面的程序,在then里企图获取一个不存在的a.b,这种程序错误也都被catch捕获:

利用 axios提供的interceptors机制创建通用错误处理

 另外,axios提供的interceptors机制也提供了一种处理网络错误的入口,通过定义response的interceptor,可以设计全局的错误处理逻辑

axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

添加必要的try-catch

另外,对于易出错的地方,使用try-catch包裹处理逻辑,也是一种常见的屏蔽错误的方法,我们可以将拿不准的业务逻辑封装到try-catch中,实现错误逻辑处理。

更友善的做法

上面我们讲了如果出现错误,我们可以安插的一些逻辑处理入口,但是这些错误又该如何处理呢,当出现一个错误时,显然这个错误是程序没有预判到的,这时,最简单的办法当然是打印错误。这时,我们可以有一些处理方式能够让我们的打印更加友善

1)对常见错误类型进行判断和编号

对常见错误进行编号,网络超时10001,数据错误10002等,未知错误99999。这样,我们的提示语至少可以写成:

您的程序出现错误(编号:10001),错误详情为

error happened ReferenceError: a is not defined
    at <anonymous>:1:45

请点击复制,提交管理员处理

虽然仍然是简单的错误提示,但这样的提示会让客户感知更专业,而且有下一步解决问题的思路,提示上就更显稳当了。

另外,如果系统设计有错误报告接口,详情可以直接通过接口汇报给服务器,而在前端仅留下错误ID等信息

您的程序出现错误(编号:10001-AD32-DF68)

请向管理员提供编号以便查询错误处理情况

方法论固然重要,最重要的还是认知

上文我们介绍了几种程序员可以直接操作的业务非相关错误处理方法,这些方法都是为了明确,即便是网络错误,网不好等情况,程序员仍然有责任做到的一些设计提升。

我想告诉程序员的是,最重要的还是认知要改变,在我们遇到程序错误时,不仅要想怎么解决这个问题,还要从客户角度进一步考虑,如果还出现类似错误,客户真的想要什么样的提示。

还是最开始讲的认知最重要:对于程序员来讲,更应该把程序开发看出开发一个百毒不侵的巨人,而不是一系列需求流程的简单代码叠加。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/109919.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

散户如何进行开展量化股票交易的?

散户如何进行开展量化股票交易的&#xff1f;也就是投资者交易的条件&#xff0c;达到了投资者设定的条件时候&#xff0c;系统接口就会自动交易&#xff0c;下面来看看具体的流程&#xff1a; 依据个股的历史记录&#xff0c;进行多因子选股&#xff0c;比如&#xff0c;把市…

Rasa 基于知识库的问答 音乐百科机器人

文章目录1. 使用 ActionQueryKnowledgeBase创建知识库NLU数据2. 音乐机器人nlu.ymlstories.ymlrules.ymldomain.ymlconfig.ymlendpoints.ymldata.json自定义动作 actions.py测试使用Neo4jlearn from https://github.com/Chinese-NLP-book/rasa_chinese_book_code 机器人返回了…

从“小螺栓血案”谈装配体模型连接螺栓6个正确的处理方法

经调查发现&#xff1a;“江苏启安建设工程有限公司提供了支吊架膨胀螺栓计算书&#xff0c;但计算书上无企业相关人员签字&#xff0c;未经监理单位审核同意&#xff0c;未报施工总包单位&#xff0c;未经设计单位审定&#xff1b;计算书认为支吊架应采用直径为12mm 的膨胀螺栓…

成为全栈程序员太难了?这个低代码高效率的报表工具绝对不能错过

现在程序员有个很奇怪的归宿&#xff0c;就是都在主动或被动地成为全栈程序员。前端被要求写后端的代码&#xff0c;后端被要求能看懂前端&#xff0c;美名其曰加速成长或为老板省钱&#xff01; 但一个人能做到全栈真的很难&#xff01;就拿报表开发而言&#xff0c;学习整个…

朴素贝叶斯

概要 前文介绍了贝叶斯公式基础以及在统计领域的基本应用贝叶斯基础_zhanglehes的博客-CSDN博客&#xff0c;本文将介绍它的一种新的转换形式&#xff0c;以及在机器分类领域的应用。 分类的数学描述 朴素贝叶斯公式推理 贝叶斯公式 在分类领域&#xff0c;将其改写如下 我们…

在conda虚拟环境中安装OpenCv并在pycharm中使用

目录 一. 在下面的网站中下载OpenCV文件 二. 在虚拟环境中使用pip安装该文件 三、官网下载OpenCV源代码&#xff08;后续使用&#xff09; 四、pycharm中打开该虚拟环境 五、安装numpy和matplotlib 六、pycharm找不到cv2模块解决&#xff1a; 七、在pyhcharm中使用cv不自…

在服务器安装jupyter并在本地访问

一、安装 1.1安装jupyter notebook pip install jupyter1.2安装jupyter lab pip install jupyterlab # 中文界面包 pip install jupyterlab-language-pack-zh-CN二、本地使用 我们在远程登录Linux服务器时&#xff0c;经常希望在本地浏览器端打开jupyter notebook&#xff…

需求的收集,筛选和排序

对需求的把握是否准确&#xff0c;很大程度上决定了产品的成与败&#xff0c;需求分析对于产品经理是必须要掌握的技能&#xff0c;接下来聊下需求收集的目标和方式。 一、收集渠道&#xff1a; 1、用户反馈&#xff1a; 用户提出的反馈有可能也是我们没有意识到的问题&#…

SMT工厂及PCB工程师的福音!可视化BOM交互焊接工具来了

目前电子产品已经渗透到我们生活的各个角落&#xff0c;其产品涵盖通信、医疗、计算机及周边视听产品、玩具、家用电器、军工用品等。关于电子产品的PCBA焊接&#xff0c;在试样阶段一般采用手工焊接。手工焊接的好处是成本低&#xff0c;一把电络铁就搞定了&#xff0c;如果样…

记一次简单的白加黑测试

前一阵子成了小洋人&#xff0c;所以很长的时间也没更新了&#xff0c;今天更一篇PHP代码审计的吧&#xff0c;此次分享的内容十分的简单&#xff0c;大家简单的看看即可 命令注入 -1 从上述代码&#xff0c;我们可以看出来&#xff0c;$ip变量接收过来之后通过合并运算符(??…

【OpenCV-Python】教程:7-3 理解KMeans

OpenCV Python KMeans 的理解 【目标】 理解KMeans聚类的基础概念KMeans是如何工作的&#xff0c; 【理论】 Tshirt尺寸问题 有个公司&#xff0c;打算投放一批T-shirt到市场上售卖&#xff0c;但是不知道人们需要什么样的尺寸&#xff0c;而且工厂也不会制作所有的尺寸样…

联想C2E摄像头的折腾

背景 老苏的巨峰摄像头坏了&#xff0c;一直也没在意&#xff0c;因为监控也不是什么刚需。朋友送的&#xff0c;比较古老&#xff0c;不像现在的家用监控摄像头&#xff0c;都有 app&#xff0c;而这台巨峰摄像头不光不支持 app&#xff0c;后台设置还只能用 IE&#xff0c;因…

OLSR路由协议学习

OLSR路由协议概述两种分组路由发现与维护算法步骤链路感知邻居侦听MPR选择拓扑建立路由表的建立与维护总结概述 优化链路状态路由&#xff08;Optimized Link State Routing&#xff09;协议&#xff0c;即 OLSR 路由协议是一种平面拓扑的先验式路由协议&#xff08;主动式路由…

使用mosquitto部署MQTT服务

本次实验使用版本&#xff1a;mosquitto-1.6.7 查看版本命令&#xff1a;mosquitto -v 1安装 make && make install&#xff0c;安装mosquitto。 安装完毕后放开防火墙 查看防火墙某个端口是否开放 firewall-cmd --query-port1883/tcp 开放防火墙端口80 firewall-…

BHG Mall超级宠粉节攻略收藏,商业IP化出圈新玩法

购物中心作为人们生活的第三空间&#xff0c;除了满足物质需求外&#xff0c;是人们精神消费的最主要空间之一。中国连锁经营协会发布《中国购物中心对经济社会发展贡献力报告》&#xff0c;报告中显示&#xff0c;购物中心不断转变&#xff0c;发展成为城市能够识别时代精神符…

关于我转行嵌入式的那些事

文章目录**为什么想转行了&#xff1f;****一、工作环境问题****二、无休止的出差加班和混乱的作息时间****三、工作压力大****四、薪资上限低&#xff0c;行业前景差****为什么选择嵌入式****转行前的学习****一、单片机开发****二、Linux应用开发****三、Linux驱动开发和Andr…

高校GIS系统有何作用?

根据高校信息化管理平台的基本建设&#xff0c;全方位提高数据服务团体的管理服务质量。根据综合性平台全方位地服务项目出示&#xff0c;更为全方位地掌握老师学生的主题活动特性&#xff0c;并根据云计算技术对老师学生的个人行为数据信息开展发掘剖析&#xff0c;进而精确掌…

VSCode远程连接Linux服务器上的项目,并连接GitHub

一、Linux中创建ssh密钥 以centos为例&#xff0c;创建ssh密钥 ssh-keygen -t rsa -C "your_emailexample.com" 后面连续点击回车即可。 如此便会在 ~/.ssh 目录下生成身份验证所需的公钥和私钥两个文件. 上文中使用的 RSA 算法, 所以得到的文件默认应为 id_rsa…

基于FPGA的 TMDS 编码 及 HDMI 显示

目录 引言 TMDS 编码 原理简介 TMDS编码实现 HDMI差分数据串行 实现方法 源码 HDMI显示方法 思路 实现 工程结构 源代码分享 板级调试视频 引言 最近在开发板上倒腾了一下 TMDS 视频编码的原理以及实现。特在此做一个记录。文附 全部设计源码、MATLAB源码&#xf…

【IE】信息抽取任务简述

1 信息抽取任务 信息抽取&#xff08;Information extraction&#xff0c;IE&#xff09;任务指从非结构化或半结构化的文本中抽取出结构化信息。根据被抽取的对象&#xff0c;信息抽取可以分为以下4个任务&#xff1a; &#xff08;1&#xff09; 实体抽取&#xff08;Entity…