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

news2024/9/16 16:41:22

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.coloradmin.cn/o/1544371.html

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

相关文章

数据挖掘终篇!一文学习模型融合!从加权融合到stacking, boosting

模型融合:通过融合多个不同的模型,可能提升机器学习的性能。这一方法在各种机器学习比赛中广泛应用, 也是在比赛的攻坚时刻冲刺Top的关键。而融合模型往往又可以从模型结果,模型自身,样本集等不同的角度进行融合。 数据…

使用ChatGPT的场景之gpt写研究报告,如何ChatGPT写研究报告

推荐写研究报告使用智能站: dayfire.cn/ 1. 确定研究主题 明确主题:在开始之前,你需要有一个清晰的研究主题。这将帮助AI更好地理解你的需求…

Spring Cloud 网关Gateway + 配置中心

网关 网络的接口,负责请求的路由、转发、身份校验 路由:告诉请求去哪找 转发:请求找不到直接带请求过去 路由及转发 判断前端请求的规则就这么配 当前情况下只需要访问8080端口 就可以完成对全部微服务的访问 路由属性 登录校验 没必要在每…

开源 OLAP 及其在不同场景下的需求

目录 一、开源 OLAP 综述 二、OLAP场景思考 2.1 面向客户的报表 2.2 面向经营的报表 2.3 末端运营分析 2.4 用户画像 2.5 订单分析 2.6 OLAP技术需求思考 三、开源数据湖/流式数仓解决方案 3.1 离线数仓体系——Lambda架构 3.2 实时数据湖解决方案 3.3 实时分析解决…

力扣刷题之21.合并两个有序链表

仅做学习笔记之用。 题目: 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4]示例 2: 输入&#xf…

ikuai配置自建机房网络

如果你是ikuai官方的配件就不用往下看了直接设置就行了(氪金大佬请绕路) 网络规划拓扑 这里使用一台配置不用很高的Windows来实现。唯一的硬性条件是必须是 win10及以上系统,且现场的管理线光猫必须为桥接模式 一、 1、打开windows的控制面…

深入了解直播美颜技术:美颜SDK的性能优化与算法创新

美颜技术的核心是美颜SDK,它不仅仅是简单的滤镜应用,更是依托着先进的算法和性能优化实现的。接下来,小编将深度探讨美颜SDK的性能优化与算法创新,带您了解这一领域的最新进展。 一、美颜技术的发展历程 随着移动设备性能的提升和…

Springboot项目结构

1. 一个正常的企业项目里一种通用的项目结构和代码层级划分的指导意见: 一般分为如下几层: 开放接口层 终端显示层 Web 层 Service 层 Manager 层 DAO 层 外部接口或第三方平台 2. 以当下非常火热的Spring Boot典型项目结构为例,创建出…

【分布式】——CAPBASE理论

CAP&BASE理论 ⭐⭐⭐⭐⭐⭐ Github主页👉https://github.com/A-BigTree 笔记链接👉https://github.com/A-BigTree/tree-learning-notes ⭐⭐⭐⭐⭐⭐ Spring专栏👉https://blog.csdn.net/weixin_53580595/category_12279588.html Sprin…

php反序列化刷题1

[SWPUCTF 2021 新生赛]ez_unserialize 查看源代码想到robots协议 看这个代码比较简单 直接让adminadmin passwdctf就行了 poc <?php class wllm {public $admin;public $passwd; }$p new wllm(); $p->admin "admin"; $p->passwd "ctf"; ec…

解决在 yolov8 训练自己的数据集时,matplotlib 中文乱码问题【woodwhales.cn】

为了更好的阅读体验&#xff0c;建议移步至笔者的博客阅读&#xff1a;解决在 yolov8 训练自己的数据集时&#xff0c;matplotlib 中文乱码问题 在 yolov8 训练自己的数据集时&#xff0c;如果 class 字典使用了中文&#xff0c;则在训练过程中会出现形如下面的警告&#xff1a…

python初级第一次作业

一、 dayint(input("enter today day")) fdayint(input("enter num of day since today")) c((fday%7)day)%7 if c0:print("sunday") elif c1:print("monday") elif c2:print("tuesday") elif c3:print("wendnsday&quo…

Vue使用font-face自定义字体详解

目录 1 介绍2 使用2.1 语法2.2 属性说明2.3 Vue使用案例2.3.1 全局定义字体2.3.2 在页面使用 3 注意事项 1 介绍 font-face 是 CSS 中的一个规则&#xff0c;它允许你加载服务器上的字体文件&#xff08;远程或者本地&#xff09;&#xff0c;并在网页中使用这些字体。这样&am…

堆排序算法详解与C代码实现

堆排序算法详解与C代码实现 一、堆排序的基本概念二、堆排序的主要过程建堆堆调整 三、堆排序算法的特点四、堆排序的C代码实现 在众多的排序算法中&#xff0c;堆排序以其独特的性质和高效的性能脱颖而出。堆排序算法利用堆这种数据结构所设计的一种排序算法&#xff0c;它是选…

iOS开发之SwiftUI

iOS开发之SwiftUI 在iOS开发中SwiftUI与Objective-C和Swift不同&#xff0c;它采用了声明式语法&#xff0c;相对而言SwiftUI声明式语法简化了界面开发过程&#xff0c;减少了代码量。 由于SwiftUI是Apple推出的界面开发框架&#xff0c;从iOS13开始引入&#xff0c;Apple使用…

Java day16 filter

filter 1、入门2、生命周期3、执行顺序问题4、注解 1、入门 UserServlet.java package com.cky.servlet;import jakarta.servlet.ServletConfig; import jakarta.servlet.ServletContext; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebIni…

【Linux】文件属性信息、文件目录权限修改

Linux文件属性信息 在 Linux 中&#xff0c;ls命令用于列出目录内容&#xff0c;并提供了许多参数以定制输出和显示不同类型的信息。以下是一些常用的ls命令参数 -a显示所有文件和目录&#xff0c;包括以.开头的隐藏文件。-l使用长格式列出文件和目录的详细信息&#xff0c;包…

算法打卡day16

今日任务&#xff1a; 1&#xff09;513.找树左下角的值 2&#xff09;112.路径总和 3&#xff09;113.路径总和Ⅱ 4&#xff09;106.从中序与后序遍历序列构造二叉树 5&#xff09;105.从前序与中序遍历序列构造二叉 513.找树左下角的值 题目链接&#xff1a;513. 找树左下角…

【Redis教程0x06】Redis持久化之RDB快照

引言 虽说 Redis 是内存数据库&#xff0c;但是它为数据的持久化提供了两个技术。由这两个技术构成了3种持久化方式&#xff1a; RDB快照&#xff08;snapshotting&#xff09;只追加文件&#xff08;append-only file&#xff0c;AOF&#xff09;RDB和AOF的混合持久化&#…

自锁电路设计

自锁电路设计 Hi,uu们,是不是经常要用到自锁电路,通常不是使用555芯片就是用比较器来做自锁,今天我们来简单看下自锁电路的设计.图1采用了比较器构建了一个自锁电路,采用低电平复位&#xff0c;当需要复位的时候志需要将反向端的二极管拉低一下即可&#xff0c;免去 三极管控制…