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

　　備注：連續點選時，提示資訊還是隻有一個

四、系統異常提示資訊處理（響應異常）

　　背景服務不可用，在重新開機狀态中

　　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      

 　　備注：會重定向到登入頁面，并且提示：使用者未登入

五、總結

　　Vue在處理業務異常和響應異常時，可以使用element-ui的message提示框來處理，并且是在統一的http.js腳本來進行改造

知道、想到、做到、得到