Vue3+Vite+Axios Request 请求封装(TS版本)最新

Vue3+Vite+Axios Request 请求封装(TS版本)

http > index.ts 请求封装

/** @Date: 2024-03-30 12:37:05* @LastEditors: zhong* @LastEditTime: 2024-03-30 14:12:52* @FilePath: \app-admin\src\http\index.ts*/
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from "axios";
import { ElMessage } from "element-plus";// axios 请求配置
const config = {// baseURL:'http://localhost:8080',baseURL: '/api',timeout: 1000
}
// 定义返回值类型
export interface Result<T = any> {code: number;msg: string;data: T;
}class Http {// axios 实例private instance: AxiosInstance;// 构造函数初始化constructor(config: AxiosRequestConfig) {this.instance = axios.create(config);//定义拦截器this.interceptors();}private interceptors() {// axios 发送请求之前的处理this.instance.interceptors.request.use((config: InternalAxiosRequestConfig) => {// 在请求头部携带token// let token = sessionStorage.getItem('token');let token = '';if (token) {config.headers!['token'] = token;// 把 token 放到 headers 里面// (config.headers as AxiosRequestHeaders).token = token;}console.log(config);return config;}, (error: any) => {error.data = {};error.data.msg = '服务器异常,请联系管理员!'return error;})// axios 请求返回之后的处理// 请求返回处理this.instance.interceptors.response.use((res: AxiosResponse) => {// console.log(res.data);if (res.data.code != 200) {ElMessage.error(res.data.msg || '服务器出错啦');return Promise.reject(res.data.msg || '服务器出错啦');} else {return res.data;}}, (error) => {console.log('进入错误!');error.data = {};if (error && error.response) {switch (error.response.status) {case 400:error.data.msg = "错误请求";ElMessage.error(error.data.msg);break;case 401:error.data.msg = "未授权,请登录";ElMessage.error(error.data.msg);break;case 403:error.data.msg = "拒绝访问";ElMessage.error(error.data.msg);break;case 404:error.data.msg = "请求错误,未找到该资源";ElMessage.error(error.data.msg);break;case 405:error.data.msg = "请求方法未允许";ElMessage.error(error.data.msg);break;case 408:error.data.msg = "请求超时";ElMessage.error(error.data.msg);break;case 500:error.data.msg = "服务器端出错";ElMessage.error(error.data.msg);break;case 501:error.data.msg = "网络未实现";ElMessage.error(error.data.msg);break;case 502:error.data.msg = "网络错误";ElMessage.error(error.data.msg);break;case 503:error.data.msg = "服务不可用";ElMessage.error(error.data.msg);break;case 504:error.data.msg = "网络超时";ElMessage.error(error.data.msg);break;case 505:error.data.msg = "http版本不支持该请求";ElMessage.error(error.data.msg);break;default:error.data.msg = `连接错误${error.response.status}`;ElMessage.error(error.data.msg);}} else {error.data.msg = "连接到服务器失败";ElMessage.error(error.data.msg)}return Promise.reject(error);})}// GET方法get<T = Result>(url: string, params?: object): Promise<T> {return this.instance.get(url, { params });}// POST方法post<T = Result>(url: string, data?: object): Promise<T> {return this.instance.post(url, data);}// PUT方法put<T = Result>(url: string, data?: object): Promise<T> {return this.instance.put(url, data );}// DELETE方法delete<T = Result>(url: string): Promise<T> {return this.instance.delete(url);}
}export default new Http(config);

vite.config.ts 配置跨域

/** @Date: 2024-03-24 15:19:01* @LastEditors: zhong* @LastEditTime: 2024-03-30 13:48:06* @FilePath: \app-admin\vite.config.ts*/
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],server:{host: "0.0.0.0",   // 解决控制台: NextWork:use --host to exposeport: 8080,hmr: true,  // 开启热更新open: true,  // 启动在浏览器打开proxy: {'/api': {target: 'http://localhost:9999',// target就是你要访问的目标地址,可以是基础地址,这样方便在这个网站的其他api口调用数据changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),// 要记得加rewrite这句},},},resolve: {alias: [{find: '@',replacement: resolve(__dirname, 'src')}]}
})

user > UserModel.ts 用户数据模型

/** @Date: 2024-03-30 13:16:03* @LastEditors: zhong* @LastEditTime: 2024-03-30 13:19:17* @FilePath: \app-admin\src\api\user\userModel.ts*/
// 定义用户的数据类型export type User = {userId?: string,username: string,password: string,nickName: string,phone: string,sex: string,status: string,
}

user > index.ts 请求函数

/** @Date: 2024-03-30 13:15:25* @LastEditors: zhong* @LastEditTime: 2024-03-30 13:58:40* @FilePath: \app-admin\src\api\user\index.ts*/
import http from "@/http";
import { User } from "./userModel";// 新增
export const addAdminUserApi = (parm: User) => {console.log(parm);return http.post("/api/sysUser", parm)
}

AdminUser.vue 使用请求函数

<!--* @Date: 2024-03-24 18:14:27* @LastEditors: zhong* @LastEditTime: 2024-03-30 14:03:00* @FilePath: \app-admin\src\views\system\AdminUser.vue
-->
<template><el-main><!-- 搜索栏 --><el-form :model="searchParm" ref="form" :inline="true" size="default"><el-form-item><el-input v-model="searchParm.nickName" placeholder="请输入姓名"></el-input></el-form-item><el-form-item><el-button icon="search">搜索</el-button><el-button icon="closeBold" type="danger">重置</el-button><el-button icon="plus" type="primary" @click="addBtn">新增</el-button></el-form-item></el-form><!-- 新增 --><SystemDialog :title="dialog.title" :height="dialog.height" :width="dialog.width" :visible="dialog.visible"@on-close="onClose" @on-confirm="commit"><template v-slot:content><!-- 新增内容表单 --><el-form :model="addAdminParm" ref="addRef" :rules="rules" label-width="80px" :inline="false"size="default"><el-form-item prop="nickName" label="姓名:"><el-input v-model="addAdminParm.nickName"></el-input></el-form-item><el-form-item prop="sex" label="性别:"><el-radio-group v-model="addAdminParm.sex"><el-radio value="1" size="large" border></el-radio><el-radio value="2" size="large" border></el-radio></el-radio-group></el-form-item><el-form-item prop="phone" label="电话:"><el-input v-model="addAdminParm.phone"></el-input></el-form-item><el-form-item prop="username" label="账号:"><el-input v-model="addAdminParm.username"></el-input></el-form-item><el-form-item prop="password" label="密码:"><el-input v-model="addAdminParm.password"></el-input></el-form-item><el-form-item prop="status" label="状态:"><el-radio-group v-model="addAdminParm.status"><el-radio value="1" size="large" border>启用</el-radio><el-radio value="2" size="large" border>停用</el-radio></el-radio-group></el-form-item></el-form></template></SystemDialog></el-main>
</template><script setup lang="ts">
import { reactive, ref } from 'vue';
import SystemDialog from '@/components/SystemDialog/SystemDialog.vue';
import useDialog from '@/hooks/useDialog';
import { ElMessage, FormInstance } from 'element-plus';
import { addAdminUserApi } from '@/api/user'// 获取弹框属性
const { dialog, onClose } = useDialog();// 搜索绑定对对象
const searchParm = reactive({nickName: ""
})
// 表单 ref 属性
const addRef = ref<FormInstance>()// 新增按钮
const addBtn = () => {dialog.height = 320;dialog.visible = true;
}
// 新增表单内容
const addAdminParm = reactive({userId: "",username: "",password: "",nickName: "",phone: "",sex: "",status: ""})
// 表单验证规则
const rules = {nickName: [{ required: true, message: '请填写您的昵称', trigger: 'blur' },{ min: 0, max: 12, message: 'Length should be 0 to 12', trigger: 'blur' },],sex: [{ required: true, message: '请选择您的性别', trigger: 'blur' }],phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],userPassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],status: [{ required: true, message: '请选择账号状态', trigger: 'blur' }],
}
// 提交表单
const commit = () => {addRef.value?.validate(async (valid) => {if (valid) {// 提交数据const res = await addAdminUserApi(addAdminParm);if (res && res.code == 200) {// 信息提示ElMessage.success(res.msg);// 提交成功 关闭弹框dialog.visible = false;}}});
}
</script><style lang="scss" scoped></style>

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

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

相关文章

【C#】知识点速通

前言&#xff1a; 笔者是跟着哔站课程&#xff08;Trigger&#xff09;学习unity才去学习的C#&#xff0c;并且C语言功底尚存&#xff0c;所以只是简单地跟着课程将unity所用的C#语言的关键部分进行了了解&#xff0c;然后在后期unity学习过程中加以深度学习。如需完善的C#知识…

码支付个人支付宝永不掉线使用教程

​支付宝免CK添加操作稍微繁琐点&#xff0c;请耐心观看 此通道必须关闭你的余额宝自动转入功能&#xff0c;否则可能造成不跳转 支付宝添加的所有通道均支持H5免输入收款 第一步&#xff1a;打开支付宝开发平台&#xff0c;然后用你的支付宝注册登陆&#xff1a;https://op…

pytest中文使用文档----10skip和xfail标记

1. 跳过测试用例的执行 1.1. pytest.mark.skip装饰器1.2. pytest.skip方法1.3. pytest.mark.skipif装饰器1.4. pytest.importorskip方法1.5. 跳过测试类1.6. 跳过测试模块1.7. 跳过指定文件或目录1.8. 总结 2. 标记用例为预期失败的 2.1. 去使能xfail标记 3. 结合pytest.param方…

算法学习——LeetCode力扣动态规划篇5

算法学习——LeetCode力扣动态规划篇5 198. 打家劫舍 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统…

C语言如何进⾏函数的嵌套调⽤?

一、问题 C语⾔中不允许进⾏嵌套的函数定义&#xff0c;因此各函数之间是平⾏的&#xff0c;不存在上⼀级函数和下⼀级函数的问题。但是C语⾔允许在⼀个函数的定义中出现对另⼀个函数的调⽤&#xff0c;这就是函数嵌套调⽤。那么如何嵌套调⽤呢&#xff1f; 二、解答 函数的嵌…

python学习16:python中的布尔类型和条件语句的学习

python中的布尔类型和条件语句的学习 1.布尔&#xff08;bool&#xff09;类型的定义&#xff1a; 布尔类型的字面量&#xff1a;True表示真&#xff08;是、肯定&#xff09; False表示假&#xff08;否、否定&#xff09; True本质上是一个数字记作1&#xff0c;False记作0 …

遥感数字图像处理的学习笔记

相关链接&#xff1a; 遥感数字图像处理实验教程&#xff08;韦玉春&#xff09;--部分实验问题回答 目录 1.什么是图像&#xff0c;什么是数字图像&#xff1f; 2.什么是遥感数字图像&#xff1f;模拟图像(照片)与遥感数字图像有什么区别&#xff1f; 3.什么是遥感数字图像…

构建操作可靠的数据流系统

文章目录 前言数据流动遇到的困难先从简单开始可靠性延迟丢失 性能性能损失性能——分层重试 可扩展性总结 前言 在流式架构中&#xff0c;任何对非功能性需求的漏洞都可能导致严重后果。如果数据工程师没有将可伸缩性、可靠性和可操作性等非功能性需求作为首要考虑因素来构建…

ChatGPT商业化平台一键部署(API管理,发卡收费,使用平台,支持GPT4)

接下来我就介绍一下如何利用开源平台搭建一个商业化的chatgpt网站 但是在此之前,请大家认真学习并遵守: OpenAI 的使用条款以及当地法律法规,不得用于非法用途。根据《生成式人工智能服务管理暂行办法》的要求,请勿对中国地区公众提供一切未经备案的生成式人工智能服务。一…

智慧公厕的全域感知、全网协同、全业务融合和全场景智慧赋能

公共厕所是城市的重要组成部分&#xff0c;为市民提供基本的生活服务。然而&#xff0c;传统的公厕管理模式存在诸多问题&#xff0c;如排队等候时间长、卫生状况差、空气质量差等&#xff0c;严重影响市民的出行和生活质量。为了解决这些问题&#xff0c;智慧公厕应运而生&…

Android9.0以后不允许HTTP访问的解决方案

背景 自 Android 9.0 起&#xff0c;默认禁止使用 HTTP 进行访问。当尝试使用 HTTP 链接时&#xff0c;将会收到以下错误信息&#xff1a; "Cleartext HTTP traffic to " host " not permitted"为了解决这一问题&#xff0c;下面介绍两种破解方法&…

【Python基础教程】4 . 算法的空间复杂度

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;python基础教程 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、…

最短路-Floyd Dijkstrea

Floyd算法 一种求解“多源最短路”问题的算法 在Floyd算法中&#xff0c;图一般用邻接矩阵存储&#xff0c;边权可正可负&#xff08;但不允许负环&#xff09;&#xff0c;利用动态规划的思想&#xff0c;逐步求解出任意两点之间的最短距离 int d[N][N],初始为无穷 d[i][j…

拌合楼管理软件开发(十三) 对接耀华XK3190-A9地磅(实战篇)

前言: 实战开整 目前而言对于整个拌合楼管理软件开发,因为公司对这个项目还处于讨论中,包括个人对其中的商业逻辑也存在一些质疑,都是在做一些技术上的储备.很早就写好了串口与地磅对接获取代码,也大概知道真个逻辑,这次刚好跟库区沟通,远程连接到磅房电脑,开始实操一下. 一、地…

【极简主义的深度学习】01 概览深度学习

要学习一个东西&#xff0c;需要先想清楚为什么而出发&#xff0c;以及怎么能达到自己想要的效果。当然也不能太执着于自己的目标&#xff0c;沿途的风景也是非常美丽的&#xff0c;如果路边的风景你觉得很美就停下来欣赏&#xff0c;机器学习也一样。对于我来说&#xff0c;是…

GFW不起作用

闲着折腾&#xff0c;刷openwrt到一个小米3G路由器后&#xff0c;GFW不起作用。后面发现是自己电脑设置了DNS&#xff0c;解析完IP后&#xff0c;在经过代代&#xff0c;IP不在GFW的清单里&#xff0c;所以转发控制就没有起作用。 结论 在经过代代前的所有节点&#xff0c;都…

使用Selenium的execute_script方法执行JavaScript代码

Selenium 的 execute_script 方法允许在浏览器上下文中执行 JavaScript 代码。这对于执行一些 WebDriver 本身不提供的操作非常有用&#xff0c;比如直接操作 DOM 元素、执行一些特定的 JavaScript 功能等。这个方法的一般语法是&#xff1a; driver.execute_script(script, *…

Java基础知识总结(30)

注解 获取注解中的值 /*** 自定义注解*/ Target({ElementType.TYPE,ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) public interface MyAnno { ​String value() default "admin"; // String value(); // int age(); } ​ //若注解属性没有给定属…

一.Git环境

1.Linux安装 sudo apt-get install git2.初次运行Git的配置 当我们安装好Git后&#xff0c;还需要在Git bash或者terminal进行一些相关设置&#xff0c;以下设置仅需设置一次即可。 git config --global user.name "Your Name" git config --global user.email &q…