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-varsMessageBox,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,
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！