axios配置ElementPLus消息提示

可以先看看element-ui的在axios中引入消息提示方式，好对比一下。

1.element-ui引入Message

参考文档

在axios中的使用

/** Axios请求
 * @Author: xuhong
 * @Date: 2020/6/19
 * @DESC: //TODO
 */

import axios from 'axios';
import baseUrl from "./config";
import {Message} from 'element-ui'

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

/**
 * 发送请求，处理请求失败
 *
 * request(url, method, data, callback)
 * request(url, method, callback)
 * request(url, callback)
 *
 * @param url
 * @param method 默认get
 * @param data
 * @param callback - 需要一个参数接收返回的数据
 *
 * @return 返回的数据，正常情况有返回，否则没有
 */
async function request(url, method = 'get', data, callback) {
    if (typeof data == 'function') {
        callback = data;
        data = '';
    }
    if (typeof method == 'function') {
        callback = method;
        method = 'get';
    }

    // axios配置 - 公共配置
    const instance = axios.create({
        baseURL: baseUrl, // 基础URL, 需要服务端处理跨域问题
        timeout: 5000, // 超时时间
    });

    // 拦截器处理完成后需要放行
    // 请求拦截器
    instance.interceptors.request.use((config) => {
        // 全局添加calcelToken
        config.cancelToken = source.token;

        // 携带token
        config.headers.Authorization = localStorage.loginData ? JSON.parse(localStorage.loginData).token : '';
        return config;
    }, (err) => {
        Message.error({message: '连接不到服务器，请稍后再试', offset: 150});
        console.log('连接不到服务器，请稍后再试');

        return false;
    });
    // 响应拦截器
    instance.interceptors.response.use((res) => {
        if (res.status && res.status == 200) {
            if (res.data.code == 200) {
                !callback || callback(res.data.data);
                return res.data.data ? res.data.data : true;

                // 登录失效
            } else if (res.data.code == 3001) {
                // 重新获取token
                (async function () {
                    let token = await request('/userAccount/updateToken');
                    if (token) {
                        let loginData = JSON.parse(localStorage.loginData);
                        loginData.token = token;
                        localStorage.loginData = JSON.stringify(loginData);
                        location.reload();

                        // 取消其它进行的请求
                        source.cancel();
                    }
                })();
            } else {
                Message.error({message: res.data.message, offset: 150});
                console.log(res.data.message);
            }
        } else {
            // 请求失败
            Message.error({message: '请求失败，请稍后再试', offset: 150});
        }
        return false;
    }, (err) => {
        Message.error({message: '服务器异常，请稍后再试', offset: 150});
        console.log('服务器异常，请稍后再试');
        return false;
    });

    // 发送请求
    return instance({
        method: method,
        url: url,
        // 携带token，或者使用上面的方法，设置ajax请求前的配置
        // headers: {'Authorization': 'Bearer ' + localStorage.token},
        data: data,
        headers: {
            'Content-Type': 'application/json'
        },
    });

}

export default request

element-plus引入消息提示

官方文档

在axios中使用

import axios from 'axios'
import { ElMessage } from 'element-plus'


const request = axios.create({
    baseURL: 'http://localhost:8888',//设置基本访问路径
    timeout: 5000 //设置超时时间
})


//添加请求拦截器
request.interceptors.request.use(config => {
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    return config;
}, error => {
    return Promise.reject(error);
})

//添加响应拦截器
request.interceptors.response.use(response => {

    //设置返回的数据
    const { data } = response;

    //如果返回的是文件，直接返回
    if (response.config.responseType === 'blob') {
        return data;
    }

    //如果返回的字符串， 把它转换为js的对象
    if (typeof data === 'string') {
        data = data ? JSON.parse(data) : data;
    }
    return response;
}, error => {
    ElMessage.error("服务器错误,请联系开发人员");
    return Promise.reject(error);
})

export { request }

// export default {
//     request
// }