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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/67259.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简单的停车场管理系统的C语言实现示例

以下是一个简单的停车场管理系统的C语言实现示例。该示例使用结构体来管理停车场的车位信息&#xff0c;并提供基本车辆进入、离开以及显示停车场状态功能。 #include <stdio.h> #include <stdlib.h> #include <string.h>#define MAX_SLOTS 10 // 最大车位数…

解除阿里云盘压缩包分享限制的最新工具(2025年更新)

前言 前段时间&#xff0c;为了在阿里云盘分享一些资料&#xff0c;尝试了好多种方法&#xff1a;改文件名后缀&#xff0c;打包自解压&#xff0c;使用将压缩文件追加在图片文件后&#xff0c;还有的一些工具&#xff0c;虽然能伪装文件但并不太好用&#xff0c;最后自己写了…

HarmonyOS:创建应用静态快捷方式

一、前言 静态快捷方式是一种在系统中创建的可以快速访问应用程序或特定功能的链接。它通常可以在长按应用图标&#xff0c;以图标和相应的文字出现在应用图标的上方&#xff0c;用户可以迅速启动对应应用程序的组件。使用快捷方式&#xff0c;可以提高效率&#xff0c;节省了查…

21.0.2-为什么选FreeRTOS 第21章-FreeRTOS项目实战--基础知识之新建任务、启动流程、编码风格、系统配置

这个是全网最详细的STM32项目教学视频。 第一篇在这里: 视频在这里 STM32智能小车V3-STM32入门教程-openmv与STM32循迹小车-stm32f103c8t6-电赛 嵌入式学习 PID控制算法 编码器电机 跟随 **V3:HAL库开发、手把手教学下面功能&#xff1a;PID速度控制、PID循迹、PID跟随、遥控、…

12 款开源OCR发 PDF 识别框架

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

DeepSeek R1:推理模型新纪元与价格战

标题&#xff1a;DeepSeek R1&#xff1a;推理模型新纪元与价格战 文章信息摘要&#xff1a; DeepSeek R1的发布标志着推理模型研究的重要转折点&#xff0c;其采用四阶段强化学习训练方法&#xff0c;结合监督微调和拒绝采样&#xff0c;显著提升了模型的推理能力。这一进展不…

深度剖析C++17中的std::optional:处理可能缺失值的利器

文章目录 一、基本概念与设计理念二、构建与初始化&#xff08;一&#xff09;默认构造&#xff08;二&#xff09;值初始化&#xff08;三&#xff09;使用std::make_optional&#xff08;四&#xff09;使用std::nullopt 三、访问值&#xff08;一&#xff09;value()&#x…

拟合损失函数

文章目录 拟合损失函数一、线性拟合1.1 介绍1.2 代码可视化1.2.1 生成示例数据1.2.2 损失函数1.2.3 绘制三维图像1.2.4 绘制等高线1.2.5 损失函数关于斜率的函数 二、 多变量拟合2.1 介绍2.2 代码可视化2.2.1 生成示例数据2.2.2 损失函数2.2.3 绘制等高线 三、 多项式拟合3.1 介…

基于微信小程序的移动学习平台的设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

【公因数匹配——暴力、(质)因数分解、哈希】

题目 暴力代码&#xff0c;Acwing 8/10&#xff0c;官网AC #include <bits/stdc.h> using namespace std; const int N 1e610; vector<int> nums[N]; int main() {ios::sync_with_stdio(0);cin.tie(0);int n;cin >> n;for(int i 1; i < n; i){int x;ci…

127周一复盘 (165)玩法与难度思考

1.上午测试&#xff0c;小改了点东西&#xff0c; 基本等于啥也没干。 匆忙赶往车站。 从此进入春节期间&#xff0c;没有开发&#xff0c;而思考与设计。 2.火车上思考玩法与难度的问题。 目前的主流作法实际上并不完全符合不同玩家的需求&#xff0c; 对这方面还是要有自…

【数据结构】_链表经典算法OJ(力扣版)

目录 1. 移除链表元素 1.1 题目描述及链接 1.2 解题思路 1.3 程序 2. 反转链表 2.1 题目描述及链接 2.2 解题思路 2.3 程序 3. 链表的中间结点 3.1 题目描述及链接 3.2 解题思路 3.3 程序 1. 移除链表元素 1.1 题目描述及链接 原题链接&#xff1a;203. 移除链表…

编译器gcc/g++ --【Linux基础开发工具】

文章目录 一、背景知识二、gcc编译选项1、预处理(进行宏替换)2、编译&#xff08;生成汇编&#xff09;3、汇编&#xff08;生成机器可识别代码&#xff09;4、链接&#xff08;生成可执行文件或库文件&#xff09; 三、动态链接和静态链接四、静态库和动态库1、动静态库2、编译…

Java 注解与元数据

Java学习资料 Java学习资料 Java学习资料 一、引言 在 Java 编程中&#xff0c;注解&#xff08;Annotation&#xff09;和元数据&#xff08;Metadata&#xff09;是两个重要的概念。注解为程序提供了一种在代码中嵌入额外信息的方式&#xff0c;这些额外信息就是元数据。元…

操作系统指定用户密码永不过期

背景 实际生产环境中&#xff0c;数据中心操作系统通常会有基线要求&#xff08;比如等保之类&#xff09;&#xff0c;要求设置操作系统密码有效期&#xff0c;但是infra团队或者操作系统管理员或者某些业务配置使用的操作系统用户又需要密码不能不停修改&#xff08;或者说一…

无用的知识又增加了:is_assignable means?

std::pair的默认operator被delete掉了&#xff0c;取而代之的是两个enable_if版本。 为什么这么设计&#xff0c;我的理解是在std::map里&#xff0c;已经保存的元素的key值是不能被修改的&#xff0c;比如 注意&#xff0c;下面的代码会修改key值&#xff0c;编译时出现错误…

能量提升法三:赞美

前情回顾&#xff1a; 《能量提升法二&#xff1a;感恩》 片段&#xff1a;“感恩&#xff0c;就像是在跟世界说&#xff1a;谢谢你&#xff0c;我收到了&#xff0c;我很喜欢&#xff0c;请多来点” 把它归还人海&#xff0c;就当作每一个人&#xff0c;都有可能是曾经帮助…

25美赛ABCDEF题详细建模过程+可视化图表+参考论文+写作模版+数据预处理

详情见该链接&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 25美国大学生数学建模如何准备&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;-CSDN博客文章浏览阅读791次&#xff0c;点赞13次&#xff0c;收藏7次。通过了解比赛基本…

2025企业繁体镜像站镜像站群版 | 干扰码+拼音插入

技术背景 高效的SEO优化和内容采集是企业站群系统的核心竞争力。本文将详细介绍一套企业级网站镜像工具包&#xff0c;重点展示其在SEO优化、内容采集、智能处理等方面的创新实现。 系统特性 1. SEO优化功能 关键词智能布局标题标签优化链接结构优化移动端适配页面加速优化…

动态规划<九>两个数组的dp

目录 引例 LeetCode经典OJ题 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 7.第七题 引例 OJ传送门LeetCode<1143>最长公共子序列 画图分析&#xff1a; 使用动态规划解决 1.状态表示 ------经验题目要求 经验为选取第一个字符串的[0,i]区间以及第二个字…