vue封装axios、element-ui消息提示、element-plus消息提示

1、axios封装

//引入axios
import axios from 'axios'
//引入登录拦截
import store, {TOKEN_HEADER} from "../store";
//引入路由
import router from "../router";
//引入定义链接
import {reUrl, path} from './urls'
//引入qs
import qs from 'qs'

import {
    // eslint-disable-next-line no-unused-vars
    MessageBox,
    Loading
} from 'element-ui'
import message from "./message";

//axios定义
axios.defaults.baseURL = reUrl;
//axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
//axios.defaults.transformRequest = [object => qs.stringify(object)]

axios.defaults.headers['Content-Type'] = 'application/json'
axios.defaults.timeout = 3000;
axios.defaults.withCredentials = true;
// axios request 拦截器
axios.interceptors.request.use(
    config => {
        //判断token是否存在
        if (store.state.token !== null) {
            //将token设置成请求头
            config.headers[TOKEN_HEADER] = store.state.token;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);
// http response 拦截器
axios.interceptors.response.use(
    res => {
        if (res.data.code === 102) {
            store.commit('delToken');
            store.commit('delUserInfo');
            router.push(path('/login.html')).then();
        } else if (res.data.code === 500 || res.data.code === 403) {
            message.alert({title: '错误', msg: res.data.msg});
        } else {
            return res;
        }
    },
    error => {
        return Promise.reject(error);
    }
);

const request = (object) => {
    let loading = null;
    if (object.loading) {
        loading = Loading.service({
            lock: true,
            text: object.loading,
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.6)'
        });
    }
    if (!object.timeout) {
        object.timeout = 0;
    }
    axios({
        method: object.method,
        url: object.url,
        data: object.data
    }).then((res) => {
        setTimeout(() => {
            if (object.loading) {
                loading.close();
            }
            if (!res) {
                return;
            }
            const data = res.data;
            if (data.code !== 403 && data.code !== 500) {
                if (isFunction(object.success)) {
                    object.success(data);
                }
            }
        }, object.timeout);
    }).catch((error) => {
        console.log(error);
        setTimeout(() => {
            if (object.loading) {
                loading.close();
            }
            if (isFunction(object.error)) {
                object.error(error);
            } else {
                message.alert({
                    title: '错误', msg: '请求出错'
                });
            }
        }, object.timeout);
    });
}

const isFunction = (func) => {
    return func && typeof func == 'function'
}

const executeReq = (object) => {
    if (object.confirm) {
        message.confirm({
            msg: object.confirm,
            func: () => request(object)
        });
    } else {
        request(object);
    }
}

export default {
    /**
     *
     * @param url 链接
     * @param data 数据
     * @param loading 是否开启 loading
     * @param timeout loading的关闭时间 不提供则为 0
     * @param confirm 是否需要 confirm 提示
     * @param success 成功返回
     * @param error 失败返回
     */

    get({url, data, loading, timeout, confirm, success, error}) {
        const method = 'GET';
        if (data) {
            data = qs.stringify(JSON.parse(JSON.stringify(data)));
            url = url + "?" + data;
        }
        executeReq({method, url, data, loading, timeout, confirm, success, error});
    },
    post({url, data, loading, timeout, confirm, success, error}) {
        const method = 'POST';
        executeReq({method, url, data, loading, timeout, confirm, success, error});
    },
    put({url, data, loading, timeout, confirm, success, error}) {
        const method = 'PUT';
        executeReq({method, url, data, loading, timeout, confirm, success, error});
    },
    delete({url, data, loading, timeout, confirm, success, error}) {
        const method = 'DELETE';
        executeReq({method, url, data, loading, timeout, confirm, success, error});
    }
}

1.1、上述需要用到的 urls

// 前端url前缀
export const feUrl = '/sake/qingjiu';
// 后端url前缀
export const reUrl = 'http://192.168.101.68:9949/sake';
// 图片url前缀
export const imgUrl = reUrl + '/img/';

// 返回链接路径
export const path = (path) => {
    return feUrl.concat(path);
}

2、element-ui 的 message(消息提示)封装

import {MessageBox, Message} from 'element-ui'

const message = (msg, type) => {
    Message({
        showClose: true,
        message: msg,
        type: type
    });
}
//成功
const success = (msg) => {
    message(msg, 'success');
}
//消息
const info = (msg) => {
    message(msg, 'info');
}
//错误
const error = (msg) => {
    message(msg, 'error');
}
//警告
const warning = (msg) => {
    message(msg, 'warning');
}

//ElMessageBox
const alert = ({title, msg, okBtnText, func}) => {
    if (!title) {
        title = '提示';
    }
    if (!msg) {
        msg = '错误';
    }
    if (!okBtnText) {
        okBtnText = '确定';
    }
    MessageBox.alert(msg, title, {
        confirmButtonText: okBtnText,
    }).then(func ? func : () => {})
}

const confirm = ({title, msg, func, cFunc}) => {
    MessageBox.confirm(msg, title ? title:'提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(func ? func : () => {}).catch(cFunc ? cFunc : () => {});
}

export default {
    success,
    info,
    error,
    warning,
    alert,
    confirm,
}

2、element-plus 的 message(消息提示)封装

import {ElMessageBox, ElMessage} from 'element-plus'

/**
 * 消息提示
 * @param msg 提示信息
 * @param type 消息类型
 */
const message = (msg, type) => {
    ElMessage({
        showClose: true,
        message: msg,
        type: type
    });
}
/**
 * 成功提示
 * @param msg 提示信息
 */
const success = (msg) => {
    message(msg, 'success');
}
/**
 * 消息提示
 * @param msg 提示信息
 */
const info = (msg) => {
    message(msg, 'info');
}
/**
 * 错误提示
 * @param msg 提示信息
 */
const error = (msg) => {
    message(msg, 'error');
}

/**
 * 警告提示
 * @param msg 提示信息
 */
const warning = (msg) => {
    message(msg, 'warning');
}

/**
 * alert提示框
 * @param title 标题
 * @param msg 信息
 * @param ok ok函数
 * @param okText ok按钮文字
 */
const alert = ({title, msg, ok, okText}) => {
    if (!title) {
        title = '提示';
    }
    if (!msg) {
        msg = '错误';
    }
    if (!okText) {
        okText = '确定';
    }
    ElMessageBox.alert(msg, title, {
        confirmButtonText: okText,
    }).then(ok ? ok : () => {});
}

/**
 * confirm 提示框
 * @param title 标题
 * @param msg 信息
 * @param ok ok函数
 * @param okText ok按钮文字
 * @param cancel 取消函数
 * @param cText cancel按钮文字
 */
const confirm = ({title, msg, ok, okText, cancel, cText}) => {
    ElMessageBox.confirm(msg, title ? title:'提示', {
        confirmButtonText: okText ? okText:'确定',
        cancelButtonText: cText ? cText:'取消',
    }).then(ok ? ok : () => {}).catch(cancel ? cancel : () => {});
}

export default {
    success,
    info,
    error,
    warning,
    alert,
    confirm,
}