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.dataType
    }).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のメッセージパッケージ

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'

const message = (msg, type) => {
     
    ElMessage({
     
        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 = '  ';
    }
    ElMessageBox.alert(msg, title, {
     
        confirmButtonText: okBtnText,
    }).then(func ? func : () => {
     });
}

const confirm = ({
     title, msg, func, cFunc}) => {
     
    ElMessageBox.confirm(msg, title ? title:'  ', {
     
        confirmButtonText: '  ',
        cancelButtonText: '  ',
    }).then(func ? func : () => {
     }).catch(cFunc ? cFunc : () => {
     });
}

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