uniapp中uni.request的统一封装 (ts版)
文章目录
- 前言
- 一、我们为什么要去封装?
- 二、具体实现
- 1.创建一个请求封装文件:
- 2.封装 uni.request:
- 3.如何去使用?
- 总结
前言
在uniapp中如何去更简洁高效的发送我们的请求,下面就介绍了uni.request()二次封装。
一、我们为什么要去封装?
在 UniApp 中,uni.request 是用于发起网络请求的方法。为了简化代码、提高可维护性和统一管理请求逻辑,通常会对 uni.request 进行统一封装。以下是一个简单的封装示例:
二、具体实现
1.创建一个请求封装文件:
在src目录下新建一个文件,比如 request.js,用于存放封装后的请求方法。

2.封装 uni.request:
代码如下(示例):
/*** 添加拦截器:* 拦截 request 请求** TODO:* 1. 非 http 开头需拼接地址* 2. 请求超时* 3. 添加小程序端请求头标识* 4. 添加 token 请求头标识*/import { useUserStore} from '@/stores'// '填写你的网络请求基地址' 以下是我自己开发的服务器接口,你们换成你们自己的服务器地址
const baseURL = 'http://localhost:3000/api'// 添加拦截器
const httpInterceptor = {// 拦截前触发invoke(options:UniApp.RequestOptions) {// 1. 非 http 开头需拼接地址if (!options.url.startsWith('http')) {options.url = baseURL + options.url}// 2. 请求超时, 默认 60soptions.timeout = 10000// 3. 添加小程序端请求头标识options.header = {...options.header,'source-client': 'miniapp',}// 4. 添加 token 请求头标识// pina仓库里面存的token信息const userStore= useUserStore()const token = userStore.userInfo?.token// 统一携带tokenif (token) {options.header.Authorization = token}},
}
// 最后添加到uniapp的拦截器上
uni.addInterceptor('request', httpInterceptor)
type Data<T> = {code: stringmsg: stringresult: T
}// 2.2 添加类型,支持泛型
export const request= <T>(options:UniApp.RequestOptions) => {// 1. 返回 Promise 对象return new Promise<Data<T>>((resolve, reject) => {uni.request({...options,// 响应成功success(res) {// 状态码 2xx, axios 就是这样设计的if (res.statusCode >= 200 && res.statusCode < 300) {// 2.1 提取核心数据 res.dataresolve(res.data as Data<T>)} else if (res.statusCode === 401) {// 401错误 -> 清理用户信息,跳转到登录页const userStore = useUserStore()userStore .clearUserInfo()uni.navigateTo({ url: '/pages/login/login' })reject(res)} else {// 其他错误 -> 根据后端错误信息轻提示uni.showToast({icon: 'none',title: (res.data as Data<T>).msg || '请求错误',})reject(res)}},// 响应失败fail(err) {uni.showToast({icon: 'none',title: '网络错误,换个网络试试',})reject(err)},})})
}
3.如何去使用?
在需要请求的地方进行进入操作

总结
以上就是今天要讲的内容,本文仅仅简单介绍了uniapp中uni.request()的二次封装,uniapp官方文档还有很多介绍,以上就是个人的学习分享,仅供参考。
相关文章:
uniapp中uni.request的统一封装 (ts版)
文章目录 前言一、我们为什么要去封装?二、具体实现1.创建一个请求封装文件:2.封装 uni.request:3.如何去使用? 总结 前言 在uniapp中如何去更简洁高效的发送我们的请求,下面就介绍了uni.request()二次封装。 一、我们…...
记录一次gRpc流式操作(jedis版)
使用背景: 从redis队列中发送和消费消息.(使用gRpc的流式实现的消费消息) gRpc协议类定义 service方法定义 service MQDataService{ rpc sendFacebookAndroidMsg(google.protobuf.StringValue)returns (ResultProto); rpc receiveFacebookAndroidMsg(empty)returns (stream g…...
20241001国庆学习
n60f/p 这个n是指旋转磁场的速度。 极数表示旋转转子的永磁体极数,具有一对N极/S极的电机称为双极电机。 极数可以是2、4、6、8等。 (从电机控制的角度来看,当极数增加一倍时,转速将减半,当极数增加四倍时…...
基于SSM的农产品仓库管理系统【附源码】
基于SSM的农产品仓库管理系统(源码L文说明文档) 目录 4 系统设计 4.1 系统概要设计 4.2 系统功能结构设计 4.3 数据库设计 4.3.1 数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1 管理员功能介绍 5.1.1 用户管…...
fmt:C++ 格式化库
fmt 是一个现代化、快速且安全的 C 格式化库,专注于高效地格式化文本。它提供了类似 Python 的 format 功能,但具有更高的性能和类型安全特性。fmt 库在处理字符串格式化、日志输出以及构建用户友好的输出时尤为强大。自从 C20 标准引入 std::format 后&…...
RabbitMQ MQ的可靠性及消费者的可靠性
1.MQ可靠性: 如何保证消息的可靠性: (1).通过配置可以让交换机、队列、以及发送的消息都持久化。这样队列中的消息会持久化到磁盘,MQ重起消息依然存在。 (2).3.6.0版本开始,RabbitMQ引入了惰性队列模式,这种模式下&am…...
使用 Nexus 代理 Docker Hub 的配置指南
在本篇文章中,我们将详细介绍如何配置 Nexus 以代理 Docker Hub,从而实现更高效的镜像管理。以下步骤涵盖了从 Nexus 的安装到 Docker 客户端的配置。 1. 配置 Nexus 1.1 登录 Nexus 打开浏览器,访问 Nexus 的 URL(例如 http:/…...
笔记整理—linux进程部分(4)进程状态与守护进程
进程的几种重要状态,就绪态;运行态;僵尸态;等待态(浅度睡眠、深度睡眠);停止态。 就单核CPU而言,在同一时间只能运行一个进程,但实际上要运行的进程不止一个,…...
# VirtualBox中安装的CentOS 6.5网络设置为NAT模式时,怎么使用SecureCRT连接CentOS6.5系统?
VirtualBox中安装的CentOS 6.5网络设置为NAT模式时,怎么使用SecureCRT连接CentOS6.5系统? 一、查询 【VirtualBox Host-Only Network】虚拟网卡的网络配置 IP。 1、按键盘上WIN R 组合键,打开【运行】,输入【 ncpa.cpl 】&…...
7-1.Android SQLite 之 SQLiteDatabase 简单编码模板(SQLiteDatabase 使用、SQL 语句编写)
一、SQLiteDatabase SQLite 是一种轻量级的数据库引擎,它非常适合在移动设备(例如,Android)上使用 SQLiteDatabase 允许应用程序与 SQLite 数据库进行交互,它提供了增删改查等一系列方法 二、SQLiteDatabase 简单编码…...
灰度图像重心(质心)求取算法
1、图像的重心坐标计算 假设我们有一个二维图像,其中 (x, y) 表示图像中每个像素的坐标。I(x, y) 表示图像在 (x, y) 处的亮度(或像素值),通常是灰度值。 图像的重心坐标 (X, Y) 可以通过以下公式计算: X = Σ [x * I(x, y)] / Σ I(x, y) Y = Σ [y * I(x, y)] / Σ I(…...
k8s 1.28.2 集群部署 ingress 1.11.1 包含 admission-webhook
文章目录 [toc]证书创建部署 ingress-controlleringress 验证创建测试 nginx pod创建错误的 ingress 配置创建正确的 ingress 配置 ingress 官方 yaml 文件:deploy.yaml基于官方 yaml 文件做了一些修改 官方的 svc 是 ClusterIP 和 LoadBalancer,我这边把…...
pom web 自动化测试框架分享
这是初版的 pom web 测试框架,目录如下同时部分代码也放在下面,详细代码可前往 github 查看,欢迎大家给出宝贵意见。 |--base | base_page.py(封装方法) | |--config | allure_config.py(测试报告配…...
一些以前使用的linux及shell命令,gnuplot脚本
tar tar -cvzf xxx.tar.gz * -c,--create 创建新的tar文件 -v,--verbose 列出每一步处理涉及的文件的信息,只用一个“v”时,仅列出文件名 使用两个“v”时,列出权限、所有者、大小、时间、文件名等信息 -z,…...
Django一分钟:DRF模型序列化器处理关联关系的示例与注意事项
DRF的ModelSerializer序列化器与Django的Model模型紧密映射,本文将通过简单的示例介绍几种处理关联关系的方法。 1. 创建模型和初始数据 创建模型 from django.db import modelsclass Product(models.Model):product_name models.CharField(max_length255)quant…...
Python爬虫selenium框架基本使用
一、安装导入 使用包管理器安装 pip3 install selenium 二、WebDriver工具 要使用这个工具我们需要保证安装了一个浏览器的驱动器。 Python的WebDriver是一个用于自动化Web浏览器操作的工具,它属于Selenium的一部分,特别是Selenium 2.0及以后版本中…...
sql 时间交集
任务(取时间交集) 前端输入开始时间和结束时间,通过sql筛选出活动开始时间和活动结束时间再开时时间和结束时间有交集的活动 想法: 前后一段时间内遇到了类似取交集的,从网上找到了两种写法,再结合GPT等…...
【深度学习】05-Rnn循环神经网络-01- 自然语言处理概述/词嵌入层/循环网络/文本生成案例精讲
循环神经网络(RNN)主要用于自然语言处理的。 循环神经网络(RNN)、卷积神经网络(CNN)和全连接神经网络(FCN)是三种常见的神经网络类型,各自擅长处理不同类型的数据。下面…...
基于JAVA+SpringBoot+Vue的电商平台的设计与实现
基于JAVASpringBootVue的电商平台的设计与实现 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末附源码下载链接🍅…...
CSS盒模型-怪异盒模型笔记-思维导图-案例等
文章目录 一、盒模型(重点)二、怪异盒模型三、块级元素和行内元素区别汇总四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏五、思维导图六、笔记资料 一、盒模型(重点) 所有HTML元素可以看作盒子。 CSS盒模型本质上是…...
【2026最新】DirectX Repair修复工具,轻松解决 DirectX 报错、DLL 缺失与游戏闪退问题
游戏打不开、软件报错?别急着重装系统,可能是DirectX和DLL在作怪 “缺少d3dx9_43.dll”、“无法找到X3DAudio1_7.dll”、“应用程序无法启动。。。。。需要的是一个DirectX修复工具。 玩游戏或运行 3D 图形软件时,DirectX 报错是一类常见但又…...
保姆级教程:用QPST+QFIL给小米/一加备份基带qcn文件(防丢失IMEI必备)
高通机型基带备份与恢复全指南:从QCN文件操作到通信模块保护 在智能手机深度定制与系统优化的过程中,基带数据的安全往往是最容易被忽视却至关重要的环节。我曾亲眼见证一位开发者因为误操作导致IMEI丢失,花费整整两周时间与运营商周旋恢复服…...
RWKV7-1.5B-g1a惊艳案例:将复杂段落压缩为三条逻辑闭环要点
RWKV7-1.5B-g1a惊艳案例:将复杂段落压缩为三条逻辑闭环要点 1. 模型能力展示:从复杂到简洁的文本处理 RWKV7-1.5B-g1a作为一款轻量级文本生成模型,在信息压缩和提炼方面展现出令人惊喜的能力。我们通过一个实际案例来展示它如何将复杂内容转…...
对话意图识别新选择:轻量ESFT模型高效易用
对话意图识别新选择:轻量ESFT模型高效易用 【免费下载链接】ESFT-token-intent-lite 基于HuggingFace平台,deepseek-ai团队推出的ESFT-token-intent-lite模型,是ESFT-vanilla-lite的精简版,专为意图识别优化,性能卓越&…...
如何用torchtext快速构建文本分类模型?5分钟上手RoBERTa与T5实战教程
如何用torchtext快速构建文本分类模型?5分钟上手RoBERTa与T5实战教程 【免费下载链接】text Models, data loaders and abstractions for language processing, powered by PyTorch 项目地址: https://gitcode.com/gh_mirrors/te/text 想要在PyTorch生态中快…...
5大理由让你立即选择Argos Translate:开源离线翻译的终极解决方案
5大理由让你立即选择Argos Translate:开源离线翻译的终极解决方案 【免费下载链接】argos-translate Open-source offline translation library written in Python 项目地址: https://gitcode.com/GitHub_Trending/ar/argos-translate Argos Translate是一款…...
RWKV7-1.5B-g1a开源大模型落地:无需高端A100,RTX4090即可跑满多语言生成能力
RWKV7-1.5B-g1a开源大模型落地:无需高端A100,RTX4090即可跑满多语言生成能力 1. 模型简介 rwkv7-1.5B-g1a 是基于新一代 RWKV-7 架构的开源多语言文本生成模型,专为实际应用场景优化。这个1.5B参数的模型在保持出色生成能力的同时࿰…...
c++ 字符大小写转化
#include <iostream> using namespace std;int main() {char a;cin >> a;//a-z-97-122//A-Z-65-90//差32//小写转大写 if(97<(int)a && (int)a<122){a(int)a-32;cout << a; return 0; }//大写转小写 if(65<(int)a && (int)a<90)…...
大数据产品实战:用户画像系统的设计与实现
大数据产品实战:用户画像系统的设计与实现 关键词:用户画像、标签体系、大数据平台、精准营销、数据挖掘 摘要:用户画像系统是大数据时代企业实现“以用户为中心”运营的核心工具,它通过给用户“贴标签”的方式,将复杂的用户行为转化为可量化、可分析的数字特征。本文将从…...
三步解锁QQ空间历史说说备份:数据留存与管理实用指南
三步解锁QQ空间历史说说备份:数据留存与管理实用指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory QQ空间数据备份是许多用户保存青春记忆和重要记录的需求。GetQzonehist…...
