Vue 封装http 请求

ops/2025/2/1 21:11:37/

封装message 提示
 

Message.js

javascript">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

javascript">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;


http://www.ppmy.cn/ops/154857.html

相关文章

Python | Pytorch | 什么是 Inplace Operation(就地操作)?

如是我闻: 在 PyTorch 中,Inplace Operation(就地操作)是指直接修改 Tensor 本身,而不是创建新的 Tensor 的操作。PyTorch 中的 Inplace 操作通常会在函数名后加上 _ 作为后缀,例如: tensor.ad…

12 款开源OCR发 PDF 识别框架

2024 年 12 款开源文档解析框架的选型对比评测:PDF解析、OCR识别功能解读、应用场景分析及优缺点比较 这是该系列的第二篇文章,聚焦于智能文档处理(特别是 PDF 解析)。无论是在模型预训练的数据收集阶段,还是基于 RAG…

Redis地理散列GeoHash

GeoHash是一种用于地理位置编码的算法,将二维的地理坐标(纬度和经度)转换为一维的字符串表示,从而实现对地理位置的高效存储和查询。Redis作为一个内存数据库,提供了对GeoHash的支持,使得地理位置相关的数据…

【16届蓝桥杯寒假刷题营】第2期DAY5

5.变变数组 - 蓝桥云课 给定一个长度为 n 的整数数组 A,A 中第 i 个元素为 Ai​(1≤i≤n),你只能在 A 中选择一个元素 a,将 A 中所有数值等于 a 的元素变为 a2,请问变化后 A 中所有元素和的最大为多少。 …

软件工程概论试题一

一、单选 1.下面关于“发布测试”的观点错误的是( )。 A.系统开发团队不应该负责发布测试 B.发布测试是一个确认检查的过程 C.发布测试的目的是让系统供应商确信系统足够好可以使用了 D.发布测试通常采用白盒测试 正答:D 2.下图最有可能是()体系结构风格。 A. C…

PID 温控设计(基于 STC51)

PID 温控设计(基于 STC51) 一、需求分析 开关型控制存在的问题:加热的过程是全功率加热,三极管发热量大,温度控制振荡幅度大,控制精度较低。而通过采用PID方法能够更加精确地控制加热片处于目标温度&…

组合模式 - 组合模式的实现

引言 组合模式(Composite Pattern)是一种结构型设计模式,它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。组合模式使得客户端可以统一地处理单个对象和组合对象,从而简化了代码的复杂性。本文将详细介绍如何在C中实…

electron typescript运行并设置eslint检测

目录 一、初始化package.json 二、安装依赖 三、项目结构 四、配置启动项 五、补充:ts转js别名问题 已整理好的开源代码:Type-Electron: 用typescript开发的electron项目脚手架,轻量级、支持一键配置网页转PC - Gitee.com 一、初始化pac…