vue 中js文件使用elmentui的消息通知

前言

在vue中我们提示错误消息通常都是在axios调用后.catch来使用this.$message.error来显示错误消息，但是这样就会导致每个请求都需要写一遍catch就很臃肿，所以我们可以在request.js中来全局使用，但是呢，自定义的js文件无法使用this.$message来进行消息提示，因为this指向的是Window，要想使用的就只能单独引入。

引入message

import { Message } from 'element-ui';

使用

service.interceptors.response.use(
    /**
     * If you want to get http information such as headers or status
     * Please return  response => response
     */

    /**
     * Determine the request status by custom code
     * Here is just an example
     * You can also judge the status by HTTP Status Code
     */
    response => {
        const res = response.data
        // store.commit('SET_LOADING',false);
        // if the custom code is not 20000, it is judged as an error.

        if (res.code !== 200) {
            if (res.code == 401) {
                removeToken()
                sessionStorage.removeItem("user")
                store.state.userInfo = null
            }
            Message({
                message: res.message,
                type: 'error',
                showClose: true
            })
            return Promise.reject(new Error(res.message || 'Error'))
        } else {
            return res
        }
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)

在request.js中的请求响应方法中使用。这样就可以在每次请求之后都会弹出请求失败的错误消息提示