当前位置：首页 > news >正文

uniapp+vue3+ts请求接口封装

news 来源：原创 2025/7/18 2:04:08

1.安装luch-request

yarn add luch-request

npm install luch-request

2.新建文件src/utils/request.ts
需要自己修改config.baseURL和token（获取存储的token）

// 
import HttpRequest from 'luch-request';
import type { HttpRequestConfig, HttpResponse, HttpError, HttpTask } from "luch-request";
// * 请求响应参数(包含data)
export interface Result {code: numbermessage: stringsuccess?: boolean
}
export interface ResultData<T = any> extends Result {data: T
}
export const ResultEnum = {SUCCESS: 200,EXPIRE: [305, 601, 602],ERROR: -1,ERRMESSAGE: '请求失败',TIMEOUT: 25000,TYPE: 'success'
} as const// 创建 HTTP 请求实例
const request = new HttpRequest();
// 全局配置
request.setConfig((config) => {/* config 为默认全局配置*/// config.baseURL = 'https://www.example.com' /* 根域名 */// 判断环境设置不同的baseURLconfig.timeout = ResultEnum.TIMEOUTconfig.baseURL = "https://...../"//import.meta.env.VITE_APP_NODE_ENV === 'development' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_APP_BASE_URLreturn config
})
// 请求拦截器
request.interceptors.request.use((config) => {// 在发送请求之前做些什么，比如添加 tokenconst token = uni.getStorageSync("accessToken"); // 获取你的 tokenif (token) {config.header = { ...config.header, Authorization: `Bearer ${token}` };}return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);// 响应拦截器
request.interceptors.response.use((response) => {// 对响应数据做点什么// 可以根据状态码进行全局错误处理if (response.statusCode === 200) {return response.data;} else {const status = response?.statusCode// 处理 HTTP 网络错误let message = ''if (status === 401) {uni.removeStorage({key: 'accessToken',success: function (res) {uni.showModal({title: "提示",content: "身份已过期，将跳转登录！",showCancel: false,success: (res) => {if (res.confirm) {uni.navigateTo({url: '/pages/login/login'})}}});},})} else {switch (status) {case 403:message = '拒绝访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器故障'breakdefault:message = '网络连接故障'}uni.showToast({title: message,icon: 'error'})}return Promise.reject(response);}},(error) => {// 对响应错误做点什么const status = error?.statusCode// 处理 HTTP 网络错误let message = ''if (status === 401) {uni.removeStorage({key: 'accessToken',success: function (res) {uni.showModal({title: "提示",content: "身份认证失败，将跳转登录！",showCancel: false,success: (res) => {if (res.confirm) {uni.navigateTo({url: '/pages/login/login'})}}});},})} else {switch (status) {case 403:message = '拒绝访问'breakcase 404:message = '请求地址错误'breakcase 500:message = '服务器故障'breakdefault:message = '网络连接故障'}uni.showToast({title: message,icon: 'error'})}return Promise.reject(error);}
);
const http = {get<T>(url: string, params?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.get(url, { params, ...config })},post<T>(url: string, data?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.post(url, data, config)},put<T>(url: string, data?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.put(url, data, config)},delete<T>(url: string, data?: object, config?: HttpRequestConfig): Promise<ResultData<T>> {return request.delete(url, data, config)}
}
export default http;

3.使用

import http from '@/utils/request'try {const response = await http.get("接口名",{ id: 11409 });console.log(response,'测试：1.需要身份验证token，2.不需要身份验证，3.带参数请求接口')} catch (error) {console.error('Failed to fetch data:', error);}

uniapp+vue3+ts请求接口封装

1.安装luch-request yarn add luch-requestnpm install luch-request2.新建文件src/utils/request.ts 需要自己修改config.baseURL和token（获取存储的token） // import HttpRequest from luch-request; import type { HttpRequestConfig, HttpRespons…...

编程日记 2025/7/18 2:04:08

‌Spring Boot中的@GetMapping注解可以用于处理HTTP GET请求，并且可以接收对象参数，详细示例

下面内容来自Ai回答，经过亲自验证，正确 ‌ Spring Boot中的GetMapping注解可以用于处理HTTP GET请求，并且可以接收对象参数。‌ 接收对象参数的基本方式在Spring Boot中，可以通过GetMapping注解接收对象参数，这通…...

编程日记 2025/7/14 1:39:05

详解Vue设计模式

详解 vue 设计模式 Vue.js 作为一个流行的前端框架，拥有许多设计模式，这些设计模式帮助开发者更好地组织和管理代码，提升代码的可维护性、可扩展性和可读性。Vue 设计模式主要体现在以下几个方面： 1. 组件化设计模式 (Compon…...

编程日记 2025/7/14 16:46:39

webpack 题目

文章目录 webpack 中 chunkHash 和 contentHash 的区别loader和plugin的区别？webpack 处理 image 是用哪个 loader，限制 image 大小的是...；webpack 如何优化打包速度 webpack 中 chunkHash 和 contentHash 的区别主要从四方面来讲一下区别&…...

编程日记 2025/7/17 21:09:30

Mysql - 存储引擎

一 MYSQL体系结构简介 MYSQL的体系结构可以分为四个层级，从上往下依次为： 1. 连接层: 最上层为客户端以及一些连接服务，包含连接操作，例如JAVA想要与MYSQL建立连接就需要用到JDBC，PHP语言与Python也可以连接到MYSQL&am…...

编程日记 2025/7/14 19:36:23

【实战教程】使用YOLOv8 OBB进行旋转框目标检测的数据集定义与训练【附源码】

《------往期经典推荐------》一、AI应用软件开发实战专栏【链接】项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...

编程日记 2025/7/12 16:45:03

怎么实现邮件营销自动化？

邮件营销能够出色地帮助我们与客户建立良好关系。无论是新客户还是老客户，都可以通过邮件来达成较为良好的客户关系。然而，从消费者的角度来看，每个人都有自己独特的习惯和特点，没有人希望收到千篇一律、营销意味过重的邮件。因此…...

编程日记 2025/7/10 23:58:40

华为服务器使用U盘重装系统

一、准备工作下载官方系统（注意服务器CPU的架构是x86-64还是aarch64，不然可能报意想不到的错）制作启动U盘（下载rufus制作工具，注意文件系统选FAT32还是NTFS） 二、安装步骤将U盘插入USB接口重启服务器…...

编程日记 2025/7/17 13:05:44

空安全编程的典范：Java 8中的安全应用指南

文章目录一、Base64 编码解码1.1 基本的编码和解码1.2 URL 和文件名安全的编码解码器1.3 MIME Base64编码和解码二、Optional类三、Nashorn JavaScript 一、Base64 编码解码 1.1 基本的编码和解码 Base64 编码： 使用 Base64.getEncoder().encodeToString(origin…...

编程日记 2025/7/7 19:18:19

深入解析 Loss 减少方式：mean和sum的区别及其在大语言模型中的应用（中英双语）

深入解析 Loss 减少方式：mean 和 sum 的区别及其在大语言模型中的应用在训练大语言模型（Large Language Models, LLM）时，损失函数（Loss Function）的处理方式对模型的性能和优化过程有显著影响。本文以 re…...

编程日记 2025/7/15 22:49:08

opencv4.8 ubuntu20.04源码编译安装报错记录

-- IPPICV: Downloading ippicv_2021.8_lnx_intel64_20230330_general.tgz from https://raw.githubusercontent.com/opencv/opencv_3rdparty/1224f78da6684df04397ac0f40c961ed37f79ccb/ippicv/ippicv_2021.8_lnx_intel64_20230330_general.tgz make -j8 到这咋不动了代理配…...

编程日记 2025/7/15 12:26:27

16-03、JVM系列之：内存与垃圾回收篇(三)

JVM系列之：内存与垃圾回收篇(三) ##本篇内容概述： 1、执行引擎 2、StringTable 3、垃圾回收一、执行引擎 ##一、执行引擎概述如果想让一个java程序运行起来，执行引擎的任务就是将字节码指令解释/编译为对应平台上的本地机器指令才可以。简…...

编程日记 2025/7/17 14:45:52

在 Spring Boot 中使用 JPA（Java Persistence API）进行数据库操作

步骤 1: 添加依赖在 pom.xml 文件中添加相关依赖： <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><…...

编程日记 2025/7/18 1:21:34

【sqlserver】mssql 批量加载数据文件 bulk copy使用

参考文章： Using bulk copy with the JDBC driver SqlServer数据批量写入 SqlServer批量插入数据方法–SqlBulkCopy sqlserver buld copy需要提供，数据文件的对应表的元数据信息主要的字段的位置、字段的名称、字段的数据类型。执行bulk load时候不一…...

编程日记 2025/7/17 2:10:41

卷积神经网络（CNN）的层次结构

卷积神经网络（CNN）是一种以其处理图像和视频数据的能力而闻名的深度学习模型，其基本结构通常包括以下几个层次，每个层次都有其特定的功能和作用： 1. 输入层（Input Layer）： 卷积神经网…...

编程日记 2025/7/15 16:53:58

使用Excel的COUNTIFS和SUMIFS函数进行高级数据分析

使用Excel的COUNTIFS和SUMIFS函数进行高级数据分析引言在处理数据时，Excel 提供了多种内置函数来帮助用户快速获取所需信息。其中，COUNTIFS 和 SUMIFS 是两个非常强大的多条件聚合函数，它们允许你根据一个或多个标准来统计或汇总数据。本…...

编程日记 2025/7/17 11:23:33

上传ssh公钥到目标服务器

创建密钥 ssh-keygen -t rsa -b 4096 -C "xxxx.xx"上传 sudo ssh-copy-id -i /Users/xx/.ssh/id_rsa.pub root127.0.0.1...

编程日记 2025/6/27 21:19:54

在visio2021 中插入MathType公式

首先要确保有着两个软件，且能用。 1、打开visio2021，之后点击“插入”-“对象” 2、打开后，选择MathType，确定 3、确定后就会弹出MathType编辑器...

编程日记 2025/6/28 18:33:25

【计算机视觉】图像的几何变换

最常见的几何变换有仿射变换和单应性变换两种，最常用的仿射变换有缩放、翻转、旋转、平移。 1. 缩放将图像放大或缩小会得到新的图像，但是多出的像素点如何实现----插值 1.1 插值方法最近邻插值双线性插值 cv2.resize() 是 OpenCV 中用于调整图像…...

编程日记 2025/7/15 22:57:50

IS-IS四

目录点到点中LSP(类似LSA）的同步过程注意LSP只有（1类LSA和2类LSA) 查看详细信息：display isis lsdb 0000.0000.0001.00-00 verbose 开摸： ISIS的伪节点LSP（类似LSA）没有路由信息 L1路由器的路由计算…...

编程日记 2025/7/15 23:59:03

CODA 离线安装及虚幻镜迁移

1、离线安装 1.1 下载Miniconda安装脚本 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh1.2 添加权限 chmod x Miniconda3-latest-Linux-x86_64.sh1.3 执行安装 ./Miniconda3-latest-Linux-x86_64.sh遇到问题，一路回车即可 1.4 …...

编程日记 2025/7/14 10:35:12

【Rive】混合动画

1 混合动画简介【Rive】动画中介绍了 Rive 中动画的基础概念和一般动画的制作流程，本文将介绍混合动画的基础概念和一般制作流程。Unity 中混合动画介绍详见→ 【Unity3D】动画混合。混合动画是指同一时刻多个动画按照一定比例同时执行，这些动画控制的…...

编程日记 2025/7/15 22:28:59

软件体系结构复习-02 软件体系结构定位及构建

软件体系结构复习-02 软件体系结构定位及构建原文链接：《软件体系结构复习-02 软件体系结构定位及构建》目录软件体系结构复习-02 软件体系结构定位及构建 1 什么是软件体系结构 2 软件生命周期中的软件体系结构 2.1 生命周期 2.2 定位与作用 1 规划和需求…...

编程日记 2025/7/13 8:21:04

MySQL-SQL语句

文章目录一. SQL语句介绍二. SQL语句分类1. 数据定义语言：简称DDL(Data Definition Language)2. 数据操作语言：简称DML(Data Manipulation Language)3. 数据查询语言：简称DQL(Data Query Language)4. 数据控制语言：简称DCL(Data …...

编程日记 2025/7/15 19:05:07

Windows版Docker上不了网怎么办？

1、判断你的config文件、daemon文件的位置。 docker info命令输入， buildx: Docker Buildx (Docker Inc.) Version: v0.17.1-desktop.1 Path: C:\Users\AAA\.docker\cli-plugins\docker-buildx.exe 这个是你电脑这些文件的位置，修改linu…...

编程日记 2025/7/12 21:01:41

Zabbix监控Oracle 19c数据库完整配置指南

Zabbix监控Oracle 19c数据库完整配置指南本文将详细介绍如何使用Zabbix配置Oracle 19c数据库监控，包括安装、配置、问题排查等全过程。本指南适合新手独立完成配置。 1. 环境准备 1.1 系统要求 Oracle 19c数据库服务器Zabbix服务器（版本5.0或更高&a…...

编程日记 2025/7/11 7:54:37

解决 Maven 部署中的 Artifact 覆盖问题：实战经验分享20241204

🛠️ 解决 Maven 部署中的 Artifact 覆盖问题：实战经验分享 📌 引言在软件开发过程中，持续集成和持续部署（CI/CD）是提高开发效率和代码质量的关键手段。Hudson 和 Maven 是两种广泛使用的工具&#xff0…...

编程日记 2025/7/13 19:11:19

mb108里opengl相关

linux/linuxgdi.cpp里CreateWindowExW的 g_signal_connect(self->m_glArea, "render", G_CALLBACK(onRenderGlTextures), self); 绑定了一个渲染事件回调。另外有 g_signal_connect(self->m_glArea, "realize", G_CALLBACK(onRealizeGlTextures)…...

编程日记 2025/7/12 19:37:18

使用docker让项目持续开发和部署

大多人选择开发时在本地，部署时文件都在容器里，如果没有容器，那就本地开发，没有映射文件，如果部署环境到容器了，容器内部启动时设置执行命令，再将映射的文件进行编译，这就直接能实现…...

编程日记 2025/7/17 7:13:32

数据结构-查找

数据结构——二叉树先序、中序、后序及层次四种遍历（C语言版）_中序遍历-CSDN博客...

编程日记 2025/7/4 15:11:30

2030. gitLab A仓同步到B仓

文章目录 1 A 仓库备份到 B 仓库2 B 仓库修改main分支的权限 1 A 仓库备份到 B 仓库 #!/bin/bash# 定义变量 REPO_DIR"/home/xhome/opt/git_sync/zz_xx_xx" # 替换为你的本地库A的实际路径 REMOTE_ORIGIN"http://192.168.1.66:8181/zzkj_software/zz_xx_xx.…...

编程日记 2025/7/16 23:05:23

Ubuntu防火墙管理(五)——ufw源规则解读与修改

firewalld与nftables 在 /etc/firewalld/firewalld.conf 文件中，FirewallBackend 选项用于指定 Firewalld 使用的防火墙后端实现。具体来说： nftables：这是当前的默认选项，表示 Firewalld 将使用 nftables 作为防火墙后端。nftab…...

编程日记 2025/7/13 13:57:40

Flink+Paimon实时数据湖仓实践分享

随着 Paimon 近两年的推广普及，使用 FlinkPaimon 构建数据湖仓的实践也越来越多。在 Flink 实时数据开发中，对于依赖大量状态 state 的场景，如长周期的累加指标计算、回撤长历史数据并更新等，使用实时数仓作为中间存储来代替 Flin…...

编程日记 2025/7/18 1:36:28

全面解析DApp开发中的智能合约设计

在DApp的开发过程中，智能合约的设计起到了至关重要的作用。智能合约是运行在区块链上的程序，负责处理和执行DApp中的逻辑、交易和数据存储。下面我们将深入探讨智能合约的设计原则、挑战和优化方法，帮助开发者掌握如何设计高效、安全的智能合…...

编程日记 2025/7/14 9:34:41

强化学习新突破：情节记忆与奖励机制引领多智能体协作

简介本推文介绍了韩国科学技术院发表在人工智能顶会ICLR 2024上的论文《Efficient Episodic Memory Utilization of Cooperative Multi-Agent Reinforcement Learning》。该论文提出创新性高效情节记忆利用（Efficient Episodic Memory Utilization，EMU…...

编程日记 2025/7/16 1:40:57

VUE3学习二

教程视频【尚硅谷Vue3入门到实战，最新版vue3TypeScript前端开发教程】https://www.bilibili.com/video/BV1Za4y1r7KE?p67&vd_sourcef1bd3b5218c30adf0a002c8c937e0a27 零环境搭建学习环境 windows10node 18vue3 创建项目 npm create vuelatest 选项中…...

编程日记 2025/7/12 21:13:18

MySQL Group Replication

参考文档： https://dev.mysql.com/doc/refman/8.4/en/group-replication-configuring-instances.html MySQL版本： mysql> select version(); ----------- | version() | ----------- | 8.4.3 | ----------- 1 row in set (0.00 sec)mysql> …...

编程日记 2025/7/15 19:13:39

设计模式学习思路二

设计模式的学习思路_设计模式必须按顺序进行吗-CSDN博客以下是一些方法和思路可以帮助你更清晰地识别使用了哪种设计模式。 1. 确定模式时的思考步骤以下是分析代码时，你可以遵循的一些思路和步骤，帮助你识别可能使用的设计模式： a. 识别…...

编程日记 2025/7/15 22:31:38

MySql 笔记

drop database if exists school; create database school default charset utf8; -- 切换到数据库school use school; -- 创建学生表 drop table if exists tb_student; create table tb_student ( stuid int not null comment 学号, stuname varchar(20) not null comment 姓…...

编程日记 2025/7/12 10:57:17

【Qt】QTableView选中行发生变化时触发的信号

问题 QTableView选中的行发生变化时，使用的信号是QTableView的selectionModel()里的currentChanged信号，界面点击行来回切换，发现怎么也触发不了？ 原因信号槽连接放在了QTableView数据初始化前面，这时候QTableView…...

编程日记 2025/7/12 14:41:39

qt图像合成模式分析

文章目录定义含义示例分析CompositionMode_ClearCompositionMode_SourceCompositionMode_DestinationCompositionMode_SourceOverCompositionMode_DestinationOverCompositionMode_SourceInCompositionMode_DestinationInCompositionMode_SourceOutCompositionMode_Destinatio…...

编程日记 2025/7/16 1:58:23

http与https的区别

加密方式： 加密技术是对信息进行编码和解码的技术，编码是把原来可读信息（又称明文）译成代码形式（又称密文），其逆过程就是解码（解密），加密技术的要点是加密算…...

编程日记 2025/7/12 15:43:56

Pyside6 --Qt Designer--Qt设计师--了解+运行ui_demo_1.py

目录一、打开Qt设计师1.1 Terminal终端1.2 打开env，GUI虚拟环境下的scripts文件1.3 不常用文件介绍（Scripts下面） 二、了解Qt设计师的各个控件作用2.1 点击widget看看效果！2.2 点击Main Window看看效果三、编写一个简易的UI代码…...

编程日记 2025/7/17 19:57:09

11.17【大数据】Hadoop【DEBUG】

列出hdfs文件系统所有的目录和文件主节点上子结点是一样的 *为什么能登进 slave 02 的主机,但是 master 当中依然显示 slave 02 为 DeadNode?* hadoop坏死节点的重启_hadoop3 子节点重启-CSDN博客注意hadoop-daemon.sh 实际上位于 Hadoop 的 sbin 目录中，而不…...

编程日记 2025/7/13 21:00:26

MQ：kafka-消费者的三种语义

文章目录前言(一) 创建topic(二) 生产者（三）消费者1. At-most-once Kafka Consumer2. At-least-once kafka consumer3. 使用subscribe实现Exactly-once4. 使用assign实现Exactly-once 前言本文主要是以kafka 09的client为例子，详解kafka c…...

编程日记 2025/7/15 23:41:21

QT 线程锁

在 Qt 中，线程锁是用来同步多线程访问共享资源的机制，防止数据竞争和线程安全问题。Qt 提供了几种线程锁和同步工具，主要包括以下几种： 1. QMutex 功能：QMutex 是 Qt 中最常用的互斥锁（mutex）…...

编程日记 2025/7/16 15:36:03

C++中protobuf Message与JSON的互相转换

C中protobuf Message与JSON的互相转换环境： protobuf: v27.3(2024-08-01) abseil: 20240722.0文章目录 C中protobuf Message与JSON的互相转换前言1. 编写通讯录addressbook.proto2. 编译3. C中测试protobuf与json的转换4. 结果前言 PB转JSON：Protoc…...

编程日记 2025/7/14 20:07:02

Milvus向量数据库03-搜索理论

Milvus向量数据库03-搜索理论 1-ANN搜索通过 k-最近邻（kNN）搜索可以找到一个查询向量的 k 个最近向量。kNN 算法将查询向量与向量空间中的每个向量进行比较，直到出现 k 个完全匹配的结果。尽管 kNN 搜索可以确保准确性，但十分耗…...

编程日记 2025/7/15 19:21:21

qt QCryptographicHash详解

1、概述 QCryptographicHash是Qt框架中提供的一个类，用于实现加密散列函数，即哈希函数。哈希函数能够将任意长度的数据转换为固定长度的哈希值，也称为散列值或数据指纹。这个哈希值通常用于数据的完整性校验、密码存储等场景。QCryptographi…...

编程日记 2025/7/17 1:18:48

【论文阅读】具身人工智能（Embodied AI）综述：连接数字与物理世界的桥梁

摘要具身人工智能（Embodied AI）对于实现通用人工智能（AGI）至关重要，是连接数字世界与物理世界的各类应用的基础。近年来，多模态大模型（MLMs）和世界模型（WMs&#xff09…...

编程日记 2025/7/13 20:08:41

相关文章：