Vue3 + Vite + TS + Element-Plus + Pinia项目(5)对axios进行封装

news/2024/4/27 17:09:46/文章来源:https://blog.csdn.net/xionglifei2014/article/details/137012442

1、在src文件夹下新建config文件夹后,新建baseURL.ts文件,用来配置http主链接

2、在src文件夹下新建http文件夹后,新建request.ts文件,内容如下

import axios from "axios"
import { ElMessage } from 'element-plus'
import router from "../router/index.ts"
import {baseURL_dev} from '../config/baseURL.ts'
import useUser from '../store/user.ts'const userStore=useUser()
const Service = axios.create({timeout:8000,baseURL:baseURL_dev,headers:{"Content-type":"application/json;charset=utf-8","Authorization":""}
})
// 添加请求拦截器
Service.interceptors.request.use(function (config) {// 在发送请求之前做些什么if (config.headers.Authorization == null ||  config.headers.Authorization== "") {config.headers.Authorization = "Bearer "+userStore.userInfo.token;}return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
Service.interceptors.response.use(function (response) {const data = response.data;if(data.code!=undefined){if(data.code!=200 && data.code!=201){if(data.code==401){userStore.clearUser();router.push('/')return data;}ElMessage.error(data.errorMsg||"服务器出错")          return data}}return data}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});// get请求
export const get = async (config:any)=>
{let ret = await Service({...config,method:"get",params:config.data})return ret
}// post请求
export const post=async (config:any)=>{let ret = await Service({...config,method:"post",data:config.data})return ret
}// put请求
export const put=async (config:any)=>{let ret = await Service({...config,method:"put",data:config.data})return ret
}// delete请求
export const del=async (config:any)=>{let ret = await Service({...config,method:"delete"})return ret
}

3、配置api,新建api.ts

import {post,get,put,del} from './request.ts'//登录方法
export const loginApi=async (data: object)=>{ let ret= post({url:"/Login/CheckLogin",data})//console.log(ret)return ret
}// 获取信息
export const getOutPatientsApi=async (data: object)=>{ let ret= get({url:`/Patient/GetOutPatients`,data})return ret
} 
// 更改患者信息
export const changePatientInfoApi=(data: object)=>{ return put({url:`/Patient/ChangePatientInfo`,data})
} // 删除用户
export const userDeleteApi=(data: object)=>{ return del({url:`/User/DeleteUserById/${data.userId}`})
} 

4、使用api

import { getPatientsApi, addPatientApi, changePatientInfoApi } from "../../http/api";getPatientsApi(searchParams).then((res) => {if (res) {if (res.data) {// console.log("用户数据", res);data.patientList = res.data.dataList;data.total = res.data.totalCount;}}});

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

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

相关文章

【C++的奇迹之旅】C++关键字命名空间使用的三种方式C++输入输出命名空间std的使用惯例

文章目录 📝前言🌠 C关键字(C98)🌉 命名空间🌠命名空间定义🌉命名空间使用 🌠命名空间的使用有三种方式:🌉加命名空间名称及作用域限定符🌠使用using将命名空间中某个成员…

【JVM】Java类加载器 和 双亲委派机制

1、java类加载器的分类 JDK8及之前 启动类加载器,BootStrap Class Loader,加载核心类,加载jre/lib目录下的类,C实现的拓展类加载器, Extension Class Loader,加载java拓展类库,jre/lib/ext目录下,比如javax…

蓝桥杯 java 凑算式 16年省赛Java组真题

题目 思路: 求有多少种解法 比如:68/3952/714就是一种解法,53/1972/486 是另一种解法 8/3952/714是可以除尽的 但是后面一个不行 所以我们也要通分 代码: public class 凑算式 {static int[] a {1, 2, 3, 4, 5, 6, 7, 8, 9};static int c…

SpringBoot Redis的使用

官方文档: 官方文档:Spring Data Redis :: Spring Data Redis 和jedis一样,SpringBoot Redis 也可以让我在Java代码中使用redis,同样也是通过引入maven依赖的形式。 加速访问github: 使用steam可以免费加速访问github Spring…

鸿蒙OS开发实例:【页面传值跳转】

介绍 本篇主要介绍如何在HarmonyOS中,在页面跳转之间如何传值 HarmonyOS 的页面指的是带有Entry装饰器的文件,其不能独自存在,必须依赖UIAbility这样的组件容器 如下是官方关于State模型开发模式下的应用包结构示意图,Page就是…

设计模式之单例模式精讲

UML图: 静态私有变量(即常量)保存单例对象,防止使用过程中重新赋值,破坏单例。私有化构造方法,防止外部创建新的对象,破坏单例。静态公共getInstance方法,作为唯一获取单例对象的入口…

ClickHouse 面试题及答案整理,最新面试题

ClickHouse的数据分布式存储机制是如何设计的? ClickHouse的数据分布式存储机制设计包括以下几个方面: 1、分片和复制: ClickHouse通过分片将数据水平划分为多个部分,每个部分存储在不同的节点上。每个分片可以有一个或多个副本…

macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载

macOS Sonoma 14.4.1 (23E224) 正式版发布,ISO、IPSW、PKG 下载 2024 年 3 月 26 日凌晨,macOS Sonoma 14.4.1 更新修复了一个可能导致连接到外部显示器的 USB 集线器无法被识别的问题。它还解决了可能导致 Java 应用程序意外退出的问题,并修…

基于单片机音乐喷泉制作设计资料

**单片机设计介绍,基于单片机音乐喷泉制作设计资料 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机音乐喷泉制作设计资料概要主要包括以下几个关键部分:系统概述、硬件设计、软件设计以及实现过…

JavaScript高级 —— 学习(一)

目录 一、作用域 (一)局部作用域 1.函数作用域 2.块作用域 (二)全局作用域 二、垃圾回收机制 GC (一)生命周期 1.内存分配 2.内存使用 3.内存回收 4.特殊情况——内存泄漏: 注意&…

基于STC12C5A60S2系列1T 8051单片机通过单个按键单击次数实现开关机应用

基于STC12C5A60S2系列1T 8051单片机通过单个按键单击次数实现开关机应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍基于STC12C5A60S2系列1T 8051单片机通过单个按…

使用JMeter进行梯度压测

使用JMeter进行梯度压测 梯度压测配置如下: 使用线程:5,然后循环5000次,共2.5万个样本使用线程:10,然后循环5000次,共5万个样本使用线程:15,然后循环5000次,共7.5万个样本使用线程:20&#xff…

Git版本管理使用手册 - 8 - 合并分支、解决冲突

合并整个开发分支 切换到本地test分支,选择右下角远程开发分支,选择Merge into Current。然后提交到远程test仓库。 合并某次提交的代码 当前工作区切换成test分支,选择远程仓库中的dev开发分支,选择需要合并的提交版本右击&a…

AcWing 4609:火柴棍数字 ← 贪心算法

【题目来源】 https://www.acwing.com/problem/content/4612/【题目描述】 给定 n 个火柴棍,你可以用它们摆出数字 0∼9。 摆出每个数字所需要的具体火柴棍数量如下图所示: 请你用这些火柴棍摆成若干个数字,并把这些数字排成一排组成一个整数…

Git---命令筛选分支,分支过多快速定位分支!(值得收藏)

在Git中,有一些命令可以用来筛选分支,帮助我们找到特定的分支。 下面是一些常用的命令: git branch:列出所有本地分支。默认情况下,当前分支会用*标记。git branch -r:列出所有远程分支。git branch -a:列…

VTK 9.2.6 源码和VTK Examples 编译 Visual Studio 2022

对于编译 VTK 源码和编译详细的说明: VTK 源码编译: 下载源码: 从 VTK 官方网站或者 GitHub 获取源代码。官网目前最近的9.3.0有问题,见VTK 9.3.0 编译问题 Visual Studio 2022去gitlab上选择9.2.6分支进行clone CMake 配置&…

UI的设计

一、RGB888的显示 即红色,绿色,蓝色都为8位,即通常说的24位色。可以很好显示各种过渡颜色。从硬件上,R、G、B三基色的连接线各需要有8根,即24根数据线;软件上存储的数据量也需要24位,即3个字节&…

|行业洞察·趋势报告|《2024旅游度假市场简析报告-17页》

报告的主要内容解读: 居民收入提高推动旅游业发展:报告指出,随着人均GDP的提升,居民的消费能力增强,旅游需求从传统的观光游向休闲、度假游转变,国内人均旅游消费持续增加。 政府政策促进旅游市场复苏&…

代码随想录阅读笔记-二叉树【层序遍历】

题目 给你一个二叉树,请你返回其按 层序遍历 得到的节点值。 (即逐层地,从左到右访问所有节点)。 思路 前面几篇博客中我们介绍了二叉树的递归遍历,迭代遍历以及统一迭代遍历,这三种遍历方式都属于二叉树…

springmvc自定义http请求状态码

1.背景 在做微信支付后回调时,微信要求: 接收成功: HTTP应答状态码需返回200或204,无需返回应答报文。 接收失败: HTTP应答状态码需返回5XX或4XX,同时需返回应答报文 微信通知文档:支付通知 - H5支付 | 微信支付商户文档中心 …