vue 封装http请求时错误信息提示使用element-ui message,只提示一次

问题:

多个接口错误信息返回,提示信息太多页面看着很烦。

http.js

import axios from 'axios'
import { Message } from 'element-ui'
import router from '../router'
const showMessage = Symbol('showMessage')
// 重写
class DonMessage {
    success (options, single = true) {
      this[showMessage]('success', options, single)
    }
    warning (options, single = true) {
      this[showMessage]('warning', options, single)
    }
    info (options, single = true) {
      this[showMessage]('info', options, single)
    }
    error (options, single = true) {
      this[showMessage]('error', options, single)
    }
  
    [showMessage] (type, options, single) {
      if (single) {
        // 判断是否已存在Message
        if (document.getElementsByClassName('el-message').length === 0) {
          Message[type](options)
        }
      } else {
        Message[type](options)
      }
    }
  }
// 使用这个
var MessageOnce = new DonMessage(); axios.interceptors.request.use(config => { let user = JSON.parse(window.localStorage.getItem('user')); var Authentication = ""; if (user) { console.log(user.Authentication); Authentication = user.Authentication; } config.headers.common['Authentication'] = 'xxxxxxx'; return config; }, err => { Message.error({ message: '请求超时!' }); // return Promise.resolve(err); }) axios.interceptors.response.use(data => { console.log(data.status); return data; }, err => { switch (err.response.status) { case 401: MessageOnce.error({ message: "登录信息已失效,请重新登录" }); window.localStorage.removeItem("user"); router.replace({ path: '/', query: { redirect: router.currentRoute.fullPath } }) break; case 500: MessageOnce.error({ message: "服务器内部错误" }); break; case 404: MessageOnce.error({ message: '服务器被吃了⊙﹏⊙∥' }); break; case 403: MessageOnce.error({ message: '权限不足,请联系管理员!' }); break; } // return Promise.resolve(err); }) let base = 'http://192.168.0.199:8082'; // let base = ''; export const postRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'application/json; charset=utf-8' } }); } export const uploadFileRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'multipart/form-data' } }); } export const putRequest = (url, params) => { return axios({ method: 'put', url: `${base}${url}`, data: params, // transformRequest: [function (data) { // let ret = '' // for (let it in data) { // ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' // } // return ret // }], headers: { // 'Content-Type': 'application/x-www-form-urlencoded' 'Content-Type': 'application/json; charset=utf-8' } }); } export const deleteRequest = (url) => { return axios({ method: 'delete', url: `${base}${url}` }); } export const getRequest = (url) => { return axios({ method: 'get', url: `${base}${url}` }); }
原文地址:https://www.cnblogs.com/shuangzikun/p/taotao_vue_message_http.html