一、前言
在我们进行使用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脚本来进行改造