Vue 封装http 请求

server/2025/2/2 23:03:07/

封装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/server/164453.html

相关文章

c++面试:类定义为什么可以放到头文件中

这个问题是刚了解预编译的时候产生的疑惑。 声明是指向编译器告知某个变量、函数或类的存在及其类型,但并不分配实际的存储空间。声明的主要目的是让编译器知道如何解析程序中的符号引用。定义不仅告诉编译器实体的存在,还会为该实体分配存储空间&#…

XML DOM - 导航节点

可通过使用节点间的关系对节点进行导航。 导航 DOM 节点 通过节点间的关系访问节点树中的节点,通常称为导航节点("navigating nodes")。 在 XML DOM 中,节点的关系被定义为节点的属性: parentNodechildNo…

Unity实现按键设置功能代码

一、前言 最近在学习unity2D,想做一个横版过关游戏,需要按键设置功能,让用户可以自定义方向键与攻击键等。 自己写了一个,总结如下。 二、界面效果图 这个是一个csv文件,准备第一列是中文按键说明,第二列…

Protocol Buffers c# with c++ communcation demo

以下内容完全由AI 生成 以下是一个 Protocol Buffers 在 C# 和 C 之间进行通信的示例,包含定义 .proto 文件、分别在 C# 和 C 中生成代码、实现简单的发送和接收逻辑 1. 定义 .proto 文件 创建一个名为 message.proto 的文件,定义一个简单的消息类型&…

(笔记+作业)书生大模型实战营春节卷王班---L1G3000 浦语提示词工程实践

学员闯关手册:https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频:https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档:https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业:htt…

MySQL 9.2.0 的功能

MySQL 9.2.0 的功能 MySQL 9.2.0 的功能新增、弃用和删除内容如下: 新增功能 权限新增12:引入了CREATE_SPATIAL_REFERENCE_SYSTEM权限,拥有该权限的用户可执行CREATE SPATIAL REFERENCE SYSTEM、CREATE OR REPLACE SPATIAL REFERENCE SYSTEM…

软件模拟I2C案例前提须知——EEPROM芯片之M24C02

引言 了解了I2C的基础知识后,我们将来使用一个I2C案例实践来深入理解I2C通讯,即软件模拟I2C。顾名思义,就是利用软件方式通过模拟I2C协议要求的时序或者说一些相关规定来实现一个I2C通讯协议,然后利用模拟出的I2C协议来实现两个设…

【贪心算法篇】:“贪心”之旅--算法练习题中的智慧与策略(一)

✨感谢您阅读本篇文章,文章内容是个人学习笔记的整理,如果哪里有误的话还请您指正噢✨ ✨ 个人主页:余辉zmh–CSDN博客 ✨ 文章所属专栏:贪心算法篇–CSDN博客 文章目录 一.贪心算法1.什么是贪心算法2.贪心算法的特点 二.例题1.柠…