Vue 封装http 请求
封装message 提示
Message.js
import { ElMessage } from "element-plus";
const showMessage = (msg,callback,type)=>{
ElMessage({
message: msg,
type: type,
duration: 3000,
onClose:()=>{
if (callback) {
callback();
}
}
});
}
const message = {
error: (msg,callback) => {
showMessage(msg,callback,'error');
},
success: (msg,callback) => {
showMessage(msg,callback,'success');
},
warning: (msg,callback) => {
showMessage(msg,callback,'warning');
},
info: (msg,callback) => {
showMessage(msg,callback,'info');
}
}
// 导出
export default message;
封装Request.js
import axios from "axios";
import { ElLoading } from "element-plus";
import Message from "./Message";
const contentTypeForm = "application/x-www-form-urlencoded";
const contentTypeJson = "application/json";
// 创建实例
const instance = axios.create({
baseURL: "/api",
timeout: 15 * 1000,// 15 秒
});
let loading = null;
// 请求前置过滤器
instance.interceptors.request.use(
(config) => {
if (config.showLoading) {
loading = ElLoading.service({
lock: true,
text: '加载中',
background: 'rgba(0, 0, 0, 0.7)'
});
}
return config;// 返回很重要
},
(error) => {
// 请求错误 也要记得关闭弹窗
if (error.config.showLoading && loading) {
loading.close();
}
// 提示错误信息
Message.error("请求发送失败啦");
return Promise.reject(error);
}
);
// 请求后置过滤器
instance.interceptors.response.use(
(response) => {
const { showLoading, errorCallBack,showError } = response.config;
// 关闭请求
if (showLoading) {
loading.close();
}
const responseData = response.data;
if (responseData.code === 200) {
return responseData;
}else if (responseData.code === 901) {
return Promise.reject({ showError: false, msg:"登录超时"});
}else {
if (errorCallBack) {
errorCallBack(responseData)
}
return Promise.reject({ showError:showError, msg:responseData.info});
}
},(error) =>{
if (error.config.showLoading) {
loading.close();
}
return Promise.reject({showError:true,msg:"网络异常"});
});
const request = (config) => {
const {url,params,dataType,showLoading = true,errorCallBack,showError = true} = config;
let contentType = contentTypeForm;
let formData = new FormData();
// 拼接参数
for (let key in params) {
formData.append(key, params[key] == undefined ? "" : params[key]);
}
if (dataType === "json" && dataType != null) {
contentType = contentTypeJson;
}
let headers = {
"Content-Type": contentType,
"X-Requested-With": "XMLHttpRequest",
};
return instance.post(url, formData, {
headers: headers,
showLoading: showLoading,
errorCallBack: errorCallBack,
}).catch(error => {
if (showError) {
Message.error(error.msg);
}
return null;
});
};
// 导出request
export default request;