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、效果

Vue|提示信息统一处理

 

 

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

  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、效果

Vue|提示信息统一处理

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

四、系统异常提示信息处理(响应异常)

  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|提示信息统一处理

 

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

五、总结

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

 

  

 

Vue|提示信息统一处理

上一篇:Jmeter中控制器使用


下一篇:在Typescript项目中,使用ESLint和Prettier,以及解决保存代码后ESLint配置冲突问题