做好程序中的axios错误提示

最新推荐文章于 2024-08-09 02:16:55 发布

百家饭AI

最新推荐文章于 2024-08-09 02:16:55 发布

阅读量2.4k

点赞数

分类专栏： vue Javascript 文章标签：前端

本文链接：https://blog.csdn.net/baijiafan/article/details/128381902

版权

Javascript 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

vue

4 篇文章 0 订阅

订阅专栏

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

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

过程和程序的区别

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

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

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

为什么这么说呢：

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

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

为什么？

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

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

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

2）用户交互（该单击的，双击；该点确认的直接关闭）

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

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

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

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

怎么做？

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

对axios附加timeout设置
对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);
  });