一种实现简单且舒服的前端接口异常处理方案

LiangJ 发布于2019-08-26 10:30 / 1648人阅读

摘要：业务逻辑中，在处理接口数据的时候，除了要处理正常情况，也要处理异常情况。隐藏的统一处理逻辑会负责错误提示返回数据格式化等如何实现实现方案也很简单。

业务逻辑中，在处理接口数据的时候，除了要处理正常情况，也要处理异常情况。

处理方案多种多样，在这里介绍一个我常用的方案，在该方案中，业务代码只需处理数据正常的情况，无需处理：数据异常、接口请求报错（try catch）等。

以 Vue 项目为例。

该方案的开发体验

业务代码中的写法：

export default {
    async created() {
        const res = await this.getData();
        
        if (res !== null) {
            // 处理正常逻辑
        }
        
        // 如果 res 是 null，则不做任何处理
        // 隐藏的统一处理逻辑会负责错误提示等
    },
    
    methods: {
        getData() {
            return this.$ajax({
                // 各类参数
            })
        }
    }
}

效果：

业务代码中只需要处理 res 不为 null 的情况，只要 res !== null (true)。

只要数据返回有值，只处理该情况即可。

隐藏的统一处理逻辑会负责错误提示、返回数据格式化等

如何实现

实现方案也很简单。大家可以看到上面代码中用到了 this.$ajax。

在 Vue 中就是新增一个 $ajax 插件即可。代码如下：

ajaxPlugin.js

let $ajax = axios.create({
  // ... 各类配置
});
    
let $newAjax = (config) => {
    const $vm = this;
    
    return $ajax(config)
        .then(res => {
            // 这里统一处理异常情况
            // 同时也可以将数据返回值格式统一化
            
            if (res.code !== 200) {
                $vm.$message.error(res.message);
                return null;
            } else {
                return {
                    data: res.data
                };
            }
        }).catch(err => {
            $vm.$message.error(err);
            return null;
        });
};

export default {
    install(){
      Vue.prototype.$ajax = $newAjax;
    }
};

index.js

import ajaxPlugin from "./ajaxPlugin";
Vue.use(ajaxPlugin);

总结

我在多个项目中实现了这套处理逻辑，在实际的开发体验中，感觉非常不错。

在这里分享给大家。

GPU云服务器云服务器 python的异常处理 js实现的简单特效用c实现简单的shell java实现简单的web服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106277.html

前端性能与异常上报

摘要：回过头来发现，我们的项目，虽然在服务端层面做好了日志和性能统计，但在前端对异常的监控和性能的统计。对于前端的性能与异常上报的可行性探索是有必要的。这是我们页面加载性能优化需求中主要上报的相关信息。概述对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用try...catch代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口...

gggggggbong 2019-08-23 10:30 评论0 收藏0
[译] PEP 255--简单的生成器

摘要：第四种选择是在不同的线程中运行生产者和消费者。包含语句的函数被称为生成器函数。然后引发一个异常，表明迭代器已经耗尽。换句话说，未捕获的异常终结了生成器的使用寿命。 showImg(https://segmentfault.com/img/bVbntUq?w=4272&h=2848);我正打算写写 Python 的生成器，然而查资料时发现，引入生成器的 PEP 没人翻译过，因此就花了点时...

tracymac7 2019-07-31 09:58 评论0 收藏0
记一次Node项目的优化

摘要：相关环境由于是一个几年前的项目，所以使用的是这样的。一些小提示本次优化笔记，并不会有什么文件的展示。将异步改为了串行，丧失了作为异步事件流的优势。这两天针对一个Node项目进行了一波代码层面的优化，从响应时间上看，是一次很显著的提升。一个纯粹给客户端提供接口的服务，没有涉及到页面渲染相关。背景首先这个项目是一个几年前的项目了，期间一直在新增需求，导致代码逻辑变得也比较复杂，接...

dreamans 2019-08-26 12:02 评论0 收藏0