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

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.mfbz.cn/a/487819.html

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

相关文章

Pillow教程05:NumPy数组和PIL图像的相互转化

---------------Pillow教程集合--------------- Python项目18:使用Pillow模块,随机生成4位数的图片验证码 Python教程93:初识Pillow模块(创建Image对象查看属性图片的保存与缩放) Pillow教程02:图片的裁…

Qt Design Studio 软件怎么用(详细+通俗+有趣)

建议:本文长期更新,建议点赞/收藏! 1. 啥是Qt Design Studio? Qt Design Studio 是一个用于设计和开发用户界面的工具,特别适合开发跨平台应用程序。它结合了UI设计和开发的工作流程,使得设计师和开发者可…

Unity 视频组件 VideoPlayer

组件添加: 在自己定义的组件下(例如:Panel) 点击 Inspector 面板中的 AddComponent ,输入“VideoPlayer”。 资源 这里 视频资源有两种形式,第一种是 VideoClip ,需要将视频文件拖拽到该属性字段…

CI/CD实战-jenkins结合docker 5

实验准备: 在docker主机要下载git工具 禁掉key的校验 确保在立即构建项目时不会出现任何报错: 自动化构建docker镜像 在server3上安装docker-ce 修改内核参数 拷贝证书 添加默认仓库 添加harbor仓库的解析 测试拉取 登录harbor私有仓库 在jenkins安装d…

解锁未知领域:探索Web3技术的无限可能性

随着数字化时代的持续发展,Web3技术作为下一代互联网的重要组成部分,正呈现出无限的创新可能性。本文将深入探索Web3技术所带来的无限可能性,揭示其在各个领域的应用前景和潜力。 1. 区块链技术的革命性 Web3的核心是区块链技术,…

SpringBoot集成WebSocket(实时消息推送)

🍓 简介:java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…

机器学习 - 神经网络分类

什么叫做分类问题? A classification problem involves predicting whether something is one thing or another. Problem typeWhat is it?ExampleBinary classificationTarget can be one of two options, e.g. yes or noPredict whether or not someone has hea…

UDP实现聊天室

现象&#xff1a; 源码&#xff1a; 服务器&#xff1a; #include<myhead.h>struct sockaddr_in serveraddr,caddr; enum type_t//枚举 {Login,Chat,Quit, }; typedef struct MSG {char type;//L C Qchar name[32];//char text[128];// }msg_t;typedef struct NODE//链…

【C语言基础】:内存操作函数

文章目录 一、memcpy函数的使用和模拟实现1.1 memcpy函数的使用1.2 memcpy函数的模拟实现 二、memmove函数的使用和模拟实现2.1 memmove函数的使用2.2 memmove函数的模拟实现 三、memset函数的使用3.1 menset函数的使用 四、memcmp函数的使用4.1 memcmp函数的使用 学海无涯苦作…

HarmonyOS模拟器调试

1 、设置 -> 系统设置 -> 关于手机 快速点击 5 次 HarmonyOS 版本开启开发者模式。 2 、设置 -> 系统和更新 -> 开发人员选项 到开发人员选项后往下拉有 USB 调试 &#xff0c;把 USB 调试开关打开。 源自&#xff1a;HarmonyOS HarmonyOS Next 仿小米商城App入门…

Prompt提示工程上手指南:基础原理及实践(四)-检索增强生成(RAG)策略下的Prompt

前言 此篇文章已经是本系列的第四篇文章&#xff0c;意味着我们已经进入了Prompt工程的深水区&#xff0c;掌握的知识和技术都在不断提高&#xff0c;对于Prompt的技巧策略也不能只局限于局部运用而要适应LLM大模型的整体框架去进行改进休整。较为主流的LLM模型框架设计可以基…

iOS - Runtime-isa详解(位域、union(共用体)、位运算)

文章目录 iOS - Runtime-isa详解&#xff08;位域、union&#xff08;共用体&#xff09;、位运算&#xff09;前言1. 位域介绍1.1 思路1.2 示例 - 结构体1.3 示例 - union&#xff08;共用体&#xff09;1.3.1 说明 1.4 结构体 对比 union&#xff08;共用体&#xff09; 2. a…

Selenium 自动化 —— 切换浏览器窗口

更多内容请关注我的 Selenium 自动化 专栏&#xff1a; 入门和 Hello World 实例使用WebDriverManager自动下载驱动Selenium IDE录制、回放、导出Java源码浏览器窗口操作 平时我们在使用浏览器时&#xff0c;通常会打开多个窗口&#xff0c;然后再多个窗口中来回切换&#xf…

[STM32] 使用 STM32CubeMX 创建 STM32 工程模板

STM32CubeMX 创建工程模板 跟着100ASK_STM32F103_MINI用户手册V1.1.pdf第7章的步骤&#xff0c;使用STM32CubeMX为STM32F103C8T6创建工程模板。 点击“ACCESS TO MCU SELECTOR”通过选择芯片创建工程&#xff0c;如下图所示 等待下载完成&#xff0c;如下图所示 在搜索框输入“…

矩阵螺旋输出

问题描述&#xff1a; 所谓螺旋矩阵&#xff0c;顾名思义&#xff0c;就是将矩阵元素以螺旋顺序输出&#xff0c;如图&#xff1a; 解决思路&#xff1a; 由图不难发现&#xff0c;整个螺旋输出过程是一个个左下右上遍历的循环&#xff0c;只是遍历的规模在越变越小&#xff…

【vscode打开多文件夹】

1)将文件夹添加到工作空间中 2)文件夹方式展开 3)最终效果 小技巧&#xff1a; 文件夹的位置不对的话&#xff0c;可以拖动进行调整。

【NLP笔记】预训练+Prompt Tuning新范式之LLM时代(GPT3...)

文章目录 概述GPT3 【参考链接】 一张图总结大语言模型的技术分类、现状和开源情况 大语言模型LLM微调技术&#xff1a;Prompt Tuning A Survey of Large Language ModelsThe Practical Guides for Large Language ModelsGPT3&#xff1a;Language Models are Few-Shot Learner…

鸿蒙开发案例:【图像加载缓存库ImageKnife】

专门为OpenHarmony打造的一款图像加载缓存库&#xff0c;致力于更高效、更轻便、更简单。 简介 OpenHarmony的自研版本&#xff1a; 支持内存缓存&#xff0c;使用LRUCache算法&#xff0c;对图片数据进行内存缓存。支持磁盘缓存&#xff0c;对于下载图片会保存一份至磁盘当…

视频汇聚平台EasyCVR启用图形验证码之后调用login接口的操作方法

视频综合管理平台EasyCVR视频监控系统支持多协议接入、兼容多类型设备&#xff0c;平台可以将区域内所有部署的监控设备进行统一接入与集中汇聚管理&#xff0c;实现对监控区域的实时高清视频监控、录像与存储、设备管理、云台控制、语音对讲、级联共享等&#xff0c;在监控中心…

Oracle 19C RAC集群补丁升级

文章目录 一、补丁包概述二、OPatch检查和更新Grid用户更新OPatchOracle用户更新OPatch 三、验证Oracle Inventory的有效性四、运行 OPatch 冲突检查五、运行opatch命令检查GI HOME下是否有足够的空间六、补丁冲突检测与解决&#xff08;修补程序&#xff09;七、使用root用户应…
最新文章