Vue3+TypeScript二次封装axios

安装如下
npm install axios

第一步:创建config配置文件,用于存放请求后端的ip地址,用于后期打包后便于修改ip地址。

注:typescript要求参数要有类型。(ES6 定义对象 属性 类型 修改的是属性的值)

interface Config {getCookieExpires(): number;getBaseIP(): string;getBaseUrl(): string;getSQLServerBaseUrl(): string;
}const config: Config = {getCookieExpires() {return 5;},getBaseIP() {const developmentIP = "";return developmentIP;},getBaseUrl() {const developmentUrl = `http://${this.getBaseIP()}:8580/edu_examandmanage_back`;return developmentUrl;},getSQLServerBaseUrl() {const developmentSQLServerUrl = `http://${this.getBaseIP()}:9191/edu_examandmanage_back`;return developmentSQLServerUrl;},
};export default config;


 

第二步:封装axios于http文件中

注:{ type AxiosInstance, type AxiosResponse }要用type

import axios, { type AxiosInstance, type AxiosResponse } from "axios"
import config from '@/config';const http:AxiosInstance = axios.create({baseURL: config.getBaseUrl(),timeout: 30000, // 请求超时时间headers: {'Content-Type': 'application/json'}
});// 请求拦截器
http.interceptors.request.use((config) => {const token = sessionStorage.getItem('token');if (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => Promise.reject(error)
);// 响应拦截器
http.interceptors.response.use((response) => response,(error) => {if (error.response?.status === 403) {// 处理权限错误}return Promise.reject(error);}
);export default http;

第三步:调用http实现get、post、delete、put方法

// 公共请求
import http from 'src/lib/http'export const ProcessApi = {// 根据ID获取仪器进度GetInstrumentProgressById(id:number) {return http.get(`/api/progress/getInstrumentProgressById?id=${id}`);},// 根据UserName获取仪器进度getInstrumentProgressByUserNumber(user_number:number) {return http.get(`/api/progress/getInstrumentProgressByUserNumber?user_number=${user_number}`);},
};

第四步:引入在单页面使用(根据组件化开发模式不需要全局注册,只需要在需要的地方引用就可以了)

以下为vue2+JavaScript版本

config.js

//全局配置信息
const config =  {//token在Cookie中存储的天数,默认7天getCookieExpires(){return 5;},getBaseIP(){const developmentIP = "";return developmentIP;},getBaseUrl(){const developmentUrl = "http://" + this.getBaseIP() + ":8580/edu_examandmanage_back";// const developmentUrl = "http://localhost:8580/edu_examandmanage_back";return developmentUrl;},getSQLServerBaseUrl(){const developmentSQLServerUrl = "http://" + this.getBaseIP() + ":9191/edu_examandmanage_back";// const developmentUrl = "http://localhost:9191/edu_examandmanage_back";return developmentSQLServerUrl;},};export default config;

http.js

import axios from 'axios';
import config from '../config';
import Vue from 'vue';// Create an Axios instance
const http = axios.create({timeout: 30000, // Request timeoutbaseURL: config.getBaseUrl(),headers: {'Content-Type': 'application/json;charset=UTF-8',},
});// Add a request interceptor
http.interceptors.request.use((config) => {// Get the token from localStorageconst token = sessionStorage.getItem('token');// If the token exists, add it to the Authorization headerif (token) {config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);// Add a response interceptor
http.interceptors.response.use((response) => {return response;},(error) => {// Check if the error response status is 403if (error.response && error.response.status === 403) {// Use Vuesax to display a notificationVue.prototype.$vs.notification({title: '权限错误',text: '请叫管理员开通权限。',color: 'danger', // Set the notification colorposition: 'top-center',duration: 4000, // Duration in milliseconds});}return Promise.reject(error);}
);export default http;

 ExamApi.js

// 公共请求
import http from '@/lib/http';
export const ExamApi = {UserNeedExamByUserNumber(UserNumber){return http.get('/exam/UserNeedExamByUserNumber', { params: { UserNumber } });},SelectAllQustionByPaperIdUpdate(PaperId){return http.get('/exam/SelectAllQustionByPaperIdUpdate', { params: { PaperId } });},insertRecordFromStartExam(data) {return http.post('/exam/insertRecordFromStartExam', JSON.stringify(data));},insertUserAnswerAndSubmitExamToAddScore(data) {return http.post('/exam/insertUserAnswerAndSubmitExamToAddScore', JSON.stringify(data));},SelectAllQustionFromStore(QuestionId){return http.get('/exam/SelectAllQustionFromStore', { params: { QuestionId } });},addQuestions(data) {return http.post('/exam/addQuestions', JSON.stringify(data));},getUserAnswers(id){return http.get('/exam/RecordAllExamInfoById', { params: { id } });},delteRecordByClassName(classname){return http.post('/exam/delteRecordByClassName', classname);},SelectAllExamInfoByUserNumber(ExamUserNumber){return http.get('/exam/SelectAllExamInfoByUserNumber', { params: { ExamUserNumber } });},SelectAllExamInfo(){return http.get('/exam/SelectAllExamInfo');},DeleteQustionByQuestionId(QuestionId){return http.get('/exam/DeleteQustionByQuestionId', { params: { QuestionId } });},//组卷模块GetAllPaperInfo(){return http.get('/exam/GetAllPaperInfo');},DeleteAnPaper(paperId){return http.get('/exam/DeleteAnPaper', { params: { paperId } });},GenerateAnPaperController(data) {return http.post('/exam/GenerateAnPaperController', JSON.stringify(data));},deleteImageFile(ImageName) {return http.delete("/upload/deleteImageFile", {params: {ImageName: ImageName}});}
}

main.js

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

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

相关文章

Java+vue的医药进出口交易系统(源码+数据库+文档)

外贸系统|医药进出口交易系统 目录 基于Javavue的服装定制系统 一、前言 二、系统设计 三、系统功能设计 仓储部门功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取: 博主介绍:✌️大厂码农|毕设…

解锁生活密码,AI答案之书解决复杂难题

本文由 ChatMoney团队出品 介绍说明 “答案之书智能体”是您贴心的智慧伙伴,随时准备为您解答生活中的种种困惑。无论您在工作中遭遇瓶颈,还是在情感世界里迷失方向,亦或是对个人成长感到迷茫,它都能倾听您的心声,并给…

大数据Flink(一百一十六):Flink SQL的时间属性

文章目录 Flink SQL的时间属性 一、Flink 三种时间属性简介 二、Flink 三种时间属性的应用场景 三、​​​​​​​SQL 指定时间属性的两种方式 四、​​​​​​​​​​​​​​SQL 处理时间DDL定义 五、​​​​​​​​​​​​​​SQL 事件时间DDL定义 Flink SQL的时…

深入理解Java虚拟机:Jvm总结-垃圾收集器与内存分配策略

第三章 垃圾收集器与内存分配策略 3.1 意义 Java堆和方法区具有不确定性:一个接口的多个实现类、一个方法的不同条件分支需要的内存可能不一样。程序运行起来才知道到底会创建什么对象,创建多少个对象。动态分配内存和垃圾回收排查内存泄漏和内存溢出时…

javascript柯里化

return a b c d; } //通常调用方式 var sum add(1, 2, 3, 4); //柯里化的调用方式 var curryAdd Curry(add); var sum curryAdd(1)(2)(3)(4); //或者很多奇怪的方式调用 var sum curryAdd(1, 2)(3, 4); var sum curryAdd(1, 2, 3)(4); var sum curryAdd(1)(…

5.第二阶段x86游戏实战2-认识内存

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 本次游戏没法给 内容参考于:微尘网络安全 工具下载: 链接:https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…

24/9/6算法笔记 kaggle 房屋价格

预测模型主要分为两大类: 回归模型:当你的目标变量是连续的数值时,你会使用回归模型进行预测。回归模型试图找到输入特征和连续输出之间的关联。一些常见的回归模型包括: 线性回归(Linear Regression)岭回归…

FFmpeg 7.0 版本 “Dijkstra”的特点概述

FFmpeg 7.0 FFmpeg 官网:https://ffmpeg.org/FFmpeg 官网更新日志,2024.4.5 号发布代号"Dijkstra"的 7.0 版本的 FFmpeg,如下截图: 为什么叫 Dijkstra“Dijkstra” 指的是艾兹格戴克斯特拉(Edsger Wybe Dijkstra),他是一位荷兰计算机科学家,对计算机科学领域…

C#使用TCP-S7协议读写西门子PLC(一)

之前本人发布西门子S7协议的报文 西门子PLC的S7协议报文解析说明_西门子报文详解-CSDN博客 西门子PLC的S7协议是西门子公司在ModbusTcp协议的基础上自定义的一种协议,仅支持西门子PLC,S7协议本质仍然属于TCP协议的一种自定义具体实现 第一步,准备工作。VS2022中新建窗体应…

Redis学习Day3——项目工程开发

扩展阅读推荐: 黑马程序员Redis入门到实战教程_哔哩哔哩_bilibili 一、项目介绍及其初始化 学习Redis的过程,我们还将遇到各种实际问题,例如缓存击穿、雪崩、热Key等问题,只有在实际的项目实践中解决这些问题,才能更好…

教师节特辑:AI绘制的卡通人物,致敬最可爱的人‍

【编号:9】教师节到了,今天我要分享一组由AI绘制的教师节主题卡通人物插画,每一幅都充满了对老师的敬意和爱戴。让我们一起用这些可爱的卡通形象,向辛勤的园丁们致敬! 🎓【教师形象】 这…

域名证书,泛域名证书,sni

文章目录 前言一、证书1.全域名证书2.泛域名证书 二、域名证书的使用1、浏览器请求域名证书流程对全域名证书的请求流程对泛域名证书的请求流程ssl client-hello携带server name 报文 2、浏览器对证书的验证流程 三、域名证书和sni 前言 本文介绍了泛域名证书和全域名证书的区别…

JavaWeb【day12】--(SpringBootWeb登录认证)

案例-登录认证 在前面的课程中,我们已经实现了部门管理、员工管理的基本功能,但是大家会发现,我们并没有登录,就直接访问到了Tlias智能学习辅助系统的后台。 这是不安全的,所以我们今天的主题就是登录认证。 最终我们…

【32单片机篇】项目:智能台灯

一、项目需求 1. 红外传感器检测是否有人,有人的话实时检测距离,过近则报警;同时计时,超过固定时间则报警; 2. 按键 1 切换工作模式:智能模式、按键模式、远程模式; 3. 智能模式下,…

UML之类图详解

犬余🐶 “我欲贱而贵,愚而智,贫而富,可乎? 曰:其唯学乎” 零、什么是类图 类图(Class Diagram)是面向对象系统建模中最常用和最重要的图,它通过图形化的方式展示系统中的…

Conda安装R环境并在Jupyter Lab中运行

说明: Conda 安装 R 环境,并在 Jupyter Lab 中运行 R 脚本。 1. 创建环境并安装r-base 创建环境:conda create -n [环境名] 激活环境:conda activate [环境名] 安装 Jupyter Lab:conda install -c conda-forge jupy…

Promise详解、自定义

这里写目录标题 一、.Promise对象详解1. Promise是什么2. Promise的优点3. 异步编程4. then(onFulfilled, onRejected):5. util.promisify 方法:6. promise的状态改变7.Promise 对象的值8. Promise的基本执行流程9. Promise的API10. Promise中的关键问题…

怎么修复松下相机死机视频只有0字节(0KB)的MDT文件【实测可修复】

死机后视频文件大小仅为0字节 松下S5相机录像死机,关机重新开机后有一个视频文件变成MDT,大小为0KB,录了30多分钟,本应为MOV格式的视频。0字节文件可以修复吗?怎么修复0字节的MDT文件为视频? 数据提取与视…

四款免费视频剪辑工具使用感受与优劣势总结

在如今这个视频内容如火如荼的时代,如何快速高效地完成视频剪辑成为许多人关心的问题;今天,我们就来轻松愉快地聊一聊本人常用的四款免费的视频剪辑工具;这四款工具各有千秋,让我们一起来看看它们的使用感受和优劣势吧…

数据结构(并查集) How did you do it? 怎么做到的!!!

一、前言 并查集的历史 1964年, Bernard A. Galler 和 Michael J. Fischer 首次描述了不相交的并查集,1975 年,Robert Tarjan 是第一个证明O(ma(n))(逆阿克曼函数 (opens new window))算法时间复杂度的上限&#xff…