【技术实现步骤摘要】
本专利技术属于系统异常处理技术和页面展示领域，具体的说是一种基于vue、vuex和axios的接口异常错误码统一处理方法。
技术介绍
1、随着移动互联网的不断发展，当今时代的网站复杂度和内容的丰富程度，跟十几年前根本不可同日而语。以前的网站可能只有一些静态内容，但是现代的网站，工程师不仅要处理静态资源，还要调用接口获取数据，甚至需要考虑网页的性能，网页的架构是否合理等。
2、而在我们的日常网站开发过程中，一个正常的网页，通常都会包含各种不同的部分。比如一个常见的商品详情页，从上到下一般是由顶部banner图，面包屑，商品说明，商品选择，商品详细介绍，推广链接以及底部banner等组成。而这些不同的模块，在现代网站中，数据来源可能会是多个接口。
3、由于互联网的快速发展，各大企业为了争夺用户和流量，网关的用户体验越来越重要。当接口请求正常时，接口会返回预期的数据，页面展示正常，用户看到的是正常的页面。但是当接口因为各种各样的原因出现异常或者说我们由于提高产品用户体验的目的，需要针对不同条件给与用户不同的反馈的时候，我们不可能任由页面出现一大片空白、页面错误404或者说出现一些用户根本看不懂，摸不清头脑的操作。
4、为了更好的留住用户，提高网站的竞争力，为公司创造出更大的价值，技术研发部门的工程师，也就是前后端工程师们就需要对不同的行为进行一个统一的错误码约定，然后前端工程师会根据不同的错误码异常展示不同的网页交互行为，以免网站出现一些预料之外的状态，以免用户流失。
5、在这个过程中，
6、而这种在代码不同地方进行修改的方案，虽然可以实现功能，一定程度上达成目的，但是这种方法使用起来不仅效率低下，占用资源多，对于一些需要快速进行产品迭代，快速占领市场的企业来说，可能无法起到很好的业务支撑效果，也就是说使用传统方法付出的维护成本相对来说较高，并且收到的效果未必有那么好。
7、为了解决这些问题，为了减少由于业务需求变动导致的错误码修改和页面展示维护成本，本专利技术提出一种基于vue、vuex和axios的接口异常错误码统一处理方法。
技术实现思路
1、针对现有技术的不足，本专利技术提出了一种基于vue、vuex和axios的接口异常错误码统一处理方法，能够有效解决
技术介绍
中的问题。
2、为实现上述目的，本专利技术提供如下技术方案：包括以下具体步骤：
3、s1、监听异常对象，当接口报错产生异常错误码时收集所有接口报错后产生的所述异常错误码；
4、s2、根据不同所述异常错误码进行对应的页面交互处理，实现实时监听异常对象。
5、本专利技术进一步改进在于，所述s1具体步骤包括：
6、s11、搭建现代项目，通过axios库向后端发起http接口请求；
7、s12、创建异常对象，将所述异常对象放入数据存放点vuex中；
8、s13、当接收到后端请求异常返回的异常信息时，更新所述异常信息至所述异常对象中，并将所述异常对象引入进行页面交互的vue组件中。
9、本专利技术进一步改进在于，所述现代项目在搭建时，对所述axios库处理后端响应的方法进行统一改造，拦截所有向后端发起的接口请求，并对所述项目中发起http请求的第三方库进行统一处理。
10、本专利技术进一步改进在于，所述s2具体步骤包括：
11、s21、构建第一错误码处理方法，引入存放在所述数据存放点vuex里面的公共异常信息对应的异常对象，通过vue框架提供的watch方法对所述异常对象进行深度监听；
12、s22、构建第二错误码处理方法，所述第二错误码处理方法作为公共的错误码处理方法，根据不同的所述异常错误码处理不同的业务逻辑；
13、s23、在watch中调用所述第二错误码处理方法，实时监听所述异常对象。
14、另一方面，本专利技术提供一种基于vue、vuex和axios的接口异常错误码统一处理系统，包括：
15、接口统一处理模块，用于收集所有接口报错后产生的异常错误码；
16、异常监听模块，用于监听异常对象以及与网页交互统一处理模块进行通信，当接口报错产生所述异常错误码时通知网页交互统一处理模块；
17、网页交互统一处理模块，用于接收由异常监听模块传递的所述异常错误码，并且根据不同异常错误码做对应的页面交互处理。
18、本专利技术进一步改进在于，所述接口统一处理模块包括接口请求接收单元和响应方法改造单元，所述接口请求接收单元用于搭建现代项目，接收通过axios库向后端发起http接口请求，所述响应方法改造单元用于对axios的处理后端响应的方法进行统一的改造，拦截所有向后端发起的接口请求。
19、本专利技术进一步改进在于，所述异常监听模块包括异常对象创建单元和异常对象引入单元，所述异常对象创建单元用于创建异常对象，将所述异常对象放入数据存放点vuex中，所述异常对象引入单元用于当接收到后端请求异常返回的异常信息时，更新所述异常信息至所述异常对象中，并将所述异常对象引入进行页面交互的vue组件中。
20、本专利技术进一步改进在于，所述网页交互统一处理模块包括第一错误码处理方法构建单元和第二错误码处理方法构建单元，所述第一错误码处理方法构建单元用于实现所述异常对象的深度监听，所述第二错误码处理方法构建单元用于保证所述异常监听模块实现所述异常对象的实时监听。
21、一种电子设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述的一种基于vue、vuex和axios的接口异常错误码统一处理方法。
22、一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述的一种基于vue、vuex和axios的接口异常错误码统一处理方法。
23、与现有技术相比，本专利技术的有益效果是：
24、1)首先实现了后端的接口的统一异常处理，而不需要在每一个发起后端接口请求的地方进行异常处理，减少了很多不必要的异常处理代码，减少了开发和维护成本。
25、2)对页面交互逻辑的处理进行了聚合和统一，而不需要在每一个组件都对组件做定制化的处理，减少了前端交互逻辑的开发和维护成本。
26、3)由于把处理方法都放在了同一个地方，后期维护起来方便，改善了程序员的开发体验。
27、4)当市场变动出现变动或者业务需求发生变更而需要产品进行迭代时，由于处理逻辑是在同一个地方，开发迭代功能起来很方便，可以帮助企业更好的进行产品业务探索。
本文档来自技高网...【技术保护点】
1.一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，包括以下具体步骤：
2.如权利要求1所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，所述S1具体步骤包括：
3.如权利要求2所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，所述现代项目在搭建时，对所述axios库处理后端响应的方法进行统一改造，拦截所有向后端发起的接口请求，并对所述项目中发起http请求的第三方库进行统一处理。
4.如权利要求3所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，所述S2具体步骤包括：
5.一种基于vue、vuex和axios的接口异常错误码统一处理系统，其基于如权利要求1-4任一项所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法实现，其特征在于，包括：
6.如权利要求5所述的一种基于vue、vuex和axios的接口异常错误码统一处理系统，其特征在于，所述接口统一处理模块包括接口请求
7.如权利要求6所述的一种基于vue、vuex和axios的接口异常错误码统一处理系统，其特征在于，所述异常监听模块包括异常对象创建单元和异常对象引入单元，所述异常对象创建单元用于创建异常对象，将所述异常对象放入数据存放点vuex中，所述异常对象引入单元用于当接收到后端请求异常返回的异常信息时，更新所述异常信息至所述异常对象中，并将所述异常对象引入进行页面交互的vue组件中。
8.如权利要求7所述的一种基于vue、vuex和axios的接口异常错误码统一处理系统，其特征在于，所述网页交互统一处理模块包括第一错误码处理方法构建单元和第二错误码处理方法构建单元，所述第一错误码处理方法构建单元用于实现所述异常对象的深度监听，所述第二错误码处理方法构建单元用于保证所述异常监听模块实现所述异常对象的实时监听。
9.一种电子设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1-4任一项的一种基于vue、vuex和axios的接口异常错误码统一处理方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-4任一项的一种基于vue、vuex和axios的接口异常错误码统一处理方法。
...【技术特征摘要】
1.一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，包括以下具体步骤：
2.如权利要求1所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，所述s1具体步骤包括：
3.如权利要求2所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，所述现代项目在搭建时，对所述axios库处理后端响应的方法进行统一改造，拦截所有向后端发起的接口请求，并对所述项目中发起http请求的第三方库进行统一处理。
4.如权利要求3所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法，其特征在于，所述s2具体步骤包括：
5.一种基于vue、vuex和axios的接口异常错误码统一处理系统，其基于如权利要求1-4任一项所述的一种基于vue、vuex和axios的接口异常错误码统一处理方法实现，其特征在于，包括：
6.如权利要求5所述的一种基于vue、vuex和axios的接口异常错误码统一处理系统，其特征在于，所述接口统一处理模块包括接口请求接收单元和响应方法改造单元，所述接口请求接收单元用于搭建现代项目，接收通过axios库向后端发起http接口请求，所述响应方法改造单元用于对axios的处理后端响应的方法进行统一的改造，拦截所有向后端发起...
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。