十一、加载效果和异常处理

一、 Loading 加载数据时显示动效---  提高用户体验度.

1. 按需导入 ElementUI 组件 Loading , Message ，在 utils文件的request.js文件中：

import { Loading, Message } from 'element-ui'; //先引入

2. 加载数据时， 打开和关闭动效 对象

注意：loadingInstance实例采用单例模式创建，防止响应异常时频繁切换路由时加载动效重复创建

// 加载数据时打开和关闭动效对象
let loading = {
    loadingInstance: null, // Loading实例
    open: function() { // 打开加载
        console.log("页面正在加载中");
        if (this.loadingInstance == null) { // 创建单例, 防止切换路由重复加载
            this.loadingInstance = Loading.service({
                target: ".main", // 效果显示区域
                text: "页面正在加载中",
            })
        }
    },
    close: function() { //关闭加载
        if (this.loadingInstance != null) {
            this.loadingInstance.close()
        }
        this.loadingInstance = null // 关闭后实例重新赋值null, 下次让它重新创建
    }
}

3. 请求拦截器中打开加载效果, 响应拦截器和异常中关闭加载效果.

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function(config) {
    loading.open() // 打开加载效果
    return config;
}, function(error) { //出现异常
    loading.close() // 关闭加载效果
    return Promise.reject(error);
});
//响应拦截器
// Add a response interceptor
request.interceptors.response.use(function(response) {
    loading.close() // 关闭加载效果

    return response;
}, function(error) {
    loading.close() // 关闭加载效果

    return Promise.reject(error);
});

4.效果图：

 二、异常统一处理

1.把头部组件、注册页和登录页里的this.message都删除，就没有任何提示了，我们在utils文件的request.js文件中重新写一下：

//响应拦截器
// Add a response interceptor
request.interceptors.response.use(function(response) {
    loading.close() // 关闭加载效果
    if (response.data.code != 2000) { // 如果后台响应状态码不是 2000 , 说明后台服务有异常,统一可在此处处理
        Message({
            message: response.data.message || "系统异常",
            type: "warning",
            duration: 5000
        })
    } else {
        Message({
            message: response.data.message || "成功",
            type: "warning",
            duration: 5000
        })
    }
    return response;
}, function(error) {
    loading.close() // 关闭加载效果
    Message({
        message: response.data.message || "系统异常",
        type: "warning",
        duration: 5000
    })
    return Promise.reject(error);
});