Vue|提示信息统一处理

一、前言

　　在我们进行使用Vue进行开发的时候，有两种异常提示信息是需要我们处理的，一种是把业务异常信息显示出来，另外一种是把系统异常信息给显示出来

二、环境准备

　　安装element-ui的依赖

npm i element-ui -S

　　改造前的http.js脚本

import axios from 'axios'

var api = process.env.API

var instance = axios.create({
    headers: {
        'content-Type': 'application/json'
    },
    baseURL: 'http://stuq.ceshiren.com:8089',
    timeout: 100000
})


instance.interceptors.request.use(
    config => {
        if (localStorage.getItem('token')) {
            config.headers.common['token'] = localStorage.getItem('token')
        }
        return config
    }
)

export default instance

三、业务异常提示信息（业务异常）

　　1、场景描述：

　　使用账号和错误的密码登录系统，后端接口返回了提示信息，如下

　　{"resultCode":0,"message":"用户不存在或密码错误","data":null}

　　2、第一次改造后的http.js

import axios from 'axios'
import {Message} from 'element-ui'




var api = process.env.API
var instance = axios.create({
    headers:{
        'Content-Type':'application/json',
    },
    baseURL:api
})

instance.interceptors.request.use(config=>{
    if(localStorage.getItem('token')){
        config.headers.common['token'] = localStorage.getItem('token')
    }
    return config
})

instance.interceptors.response.use(res=>{
    if(res.data.resultCode==1){
        return Promise.resolve(res);
    }else{
       Message({
            type: 'error',
            message: res.data.message,
            center: true
        })

        return Promise.reject(res);
    }

})

export default instance

　　3、效果

 

 

 　　备注：但是这样会带来一个问题，连续点击会有多个提示

　　4、二次改造后的http.js

import axios from 'axios'
import {Message} from 'element-ui'


var mesIns = null

var api = process.env.API
var instance = axios.create({
    headers:{
        'Content-Type':'application/json',
    },
    baseURL:api
})

instance.interceptors.request.use(config=>{
    if(localStorage.getItem('token')){
        config.headers.common['token'] = localStorage.getItem('token')
    }
    return config
})

instance.interceptors.response.use(res=>{
    if(res.data.resultCode==1){
        return Promise.resolve(res);
    }else{

        //如果页面已经存在提示信息，则先关闭，再显示
        if(mesIns){
            mesIns.close()
        }

        mesIns = Message({
            type: 'error',
            message: res.data.message,
            center: true
        })

        return Promise.reject(res);
    }

})

export default instance

　　　5、效果

　　备注：连续点击时，提示信息还是只有一个

四、系统异常提示信息处理（响应异常）

　　1、场景描述：

　　后台服务不可用，在重启状态中

　　2、改造后的http.js　

import axios from 'axios'
import {Message} from 'element-ui'
import router from '../router'

var mesIns = null

var api = process.env.API
var instance = axios.create({
    headers:{
        'Content-Type':'application/json',
    },
    baseURL:api
})

instance.interceptors.request.use(config=>{
    if(localStorage.getItem('token')){
        config.headers.common['token'] = localStorage.getItem('token')
    }
    return config
})

instance.interceptors.response.use(res=>{
    if(res.data.resultCode==1){
        return Promise.resolve(res);
    }else{

        //如果页面已经存在提示信息，则先关闭，再显示
        if(mesIns){
            mesIns.close()
        }

        mesIns = Message({
            type: 'error',
            message: res.data.message,
            center: true
        })

        return Promise.reject(res);
    }
}, error=>{
    const {response} = error
    if(response.status == 401){
        //如果页面已经存在提示信息，则先关闭，再显示
        if(mesIns){
            mesIns.close()
        }

        mesIns = Message({
            type: 'error',
            message: response.data.message,
            center: true
        })

        router.replace({
            path:'/',
            query:{
                redirect: router.currentRoute.fullPath
            }
        })

    }
    return Promise.reject(response)
})

export default instance

　　3、效果

 

 　　备注：会重定向到登录页面，并且提示：用户未登录

五、总结

　　Vue在处理业务异常和响应异常时，可以使用element-ui的message提示框来处理，并且是在统一的http.js脚本来进行改造