封裝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;