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

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版)

文章目录 前言一、我们为什么要去封装&#xff1f;二、具体实现1.创建一个请求封装文件&#xff1a;2.封装 uni.request&#xff1a;3.如何去使用&#xff1f; 总结 前言 在uniapp中如何去更简洁高效的发送我们的请求&#xff0c;下面就介绍了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是指旋转磁场的速度。 极数表示旋转转子的永磁体极数&#xff0c;具有一对N极&#xff0f;S极的电机称为双极电机。 极数可以是2、4、6、8等。 &#xff08;从电机控制的角度来看&#xff0c;当极数增加一倍时&#xff0c;转速将减半&#xff0c;当极数增加四倍时…...

基于SSM的农产品仓库管理系统【附源码】

基于SSM的农产品仓库管理系统&#xff08;源码L文说明文档&#xff09; 目录 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 格式化库&#xff0c;专注于高效地格式化文本。它提供了类似 Python 的 format 功能&#xff0c;但具有更高的性能和类型安全特性。fmt 库在处理字符串格式化、日志输出以及构建用户友好的输出时尤为强大。自从 C20 标准引入 std::format 后&…...

RabbitMQ MQ的可靠性及消费者的可靠性

1.MQ可靠性&#xff1a; 如何保证消息的可靠性&#xff1a; (1).通过配置可以让交换机、队列、以及发送的消息都持久化。这样队列中的消息会持久化到磁盘&#xff0c;MQ重起消息依然存在。 (2).3.6.0版本开始&#xff0c;RabbitMQ引入了惰性队列模式&#xff0c;这种模式下&am…...

使用 Nexus 代理 Docker Hub 的配置指南

在本篇文章中&#xff0c;我们将详细介绍如何配置 Nexus 以代理 Docker Hub&#xff0c;从而实现更高效的镜像管理。以下步骤涵盖了从 Nexus 的安装到 Docker 客户端的配置。 1. 配置 Nexus 1.1 登录 Nexus 打开浏览器&#xff0c;访问 Nexus 的 URL&#xff08;例如 http:/…...

笔记整理—linux进程部分(4)进程状态与守护进程

进程的几种重要状态&#xff0c;就绪态&#xff1b;运行态&#xff1b;僵尸态&#xff1b;等待态&#xff08;浅度睡眠、深度睡眠&#xff09;&#xff1b;停止态。 就单核CPU而言&#xff0c;在同一时间只能运行一个进程&#xff0c;但实际上要运行的进程不止一个&#xff0c;…...

# VirtualBox中安装的CentOS 6.5网络设置为NAT模式时,怎么使用SecureCRT连接CentOS6.5系统?

VirtualBox中安装的CentOS 6.5网络设置为NAT模式时&#xff0c;怎么使用SecureCRT连接CentOS6.5系统&#xff1f; 一、查询 【VirtualBox Host-Only Network】虚拟网卡的网络配置 IP。 1、按键盘上WIN R 组合键&#xff0c;打开【运行】&#xff0c;输入【 ncpa.cpl 】&…...

7-1.Android SQLite 之 SQLiteDatabase 简单编码模板(SQLiteDatabase 使用、SQL 语句编写)

一、SQLiteDatabase SQLite 是一种轻量级的数据库引擎&#xff0c;它非常适合在移动设备&#xff08;例如&#xff0c;Android&#xff09;上使用 SQLiteDatabase 允许应用程序与 SQLite 数据库进行交互&#xff0c;它提供了增删改查等一系列方法 二、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 文件&#xff1a;deploy.yaml基于官方 yaml 文件做了一些修改 官方的 svc 是 ClusterIP 和 LoadBalancer&#xff0c;我这边把…...

pom web 自动化测试框架分享

这是初版的 pom web 测试框架&#xff0c;目录如下同时部分代码也放在下面&#xff0c;详细代码可前往 github 查看&#xff0c;欢迎大家给出宝贵意见。 |--base | base_page.py&#xff08;封装方法&#xff09; | |--config | allure_config.py&#xff08;测试报告配…...

一些以前使用的linux及shell命令,gnuplot脚本

tar tar -cvzf xxx.tar.gz * -c&#xff0c;--create 创建新的tar文件 -v&#xff0c;--verbose 列出每一步处理涉及的文件的信息&#xff0c;只用一个“v”时&#xff0c;仅列出文件名 使用两个“v”时&#xff0c;列出权限、所有者、大小、时间、文件名等信息 -z&#xff0c…...

Django一分钟:DRF模型序列化器处理关联关系的示例与注意事项

DRF的ModelSerializer序列化器与Django的Model模型紧密映射&#xff0c;本文将通过简单的示例介绍几种处理关联关系的方法。 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浏览器操作的工具&#xff0c;它属于Selenium的一部分&#xff0c;特别是Selenium 2.0及以后版本中…...

sql 时间交集

任务&#xff08;取时间交集&#xff09; 前端输入开始时间和结束时间&#xff0c;通过sql筛选出活动开始时间和活动结束时间再开时时间和结束时间有交集的活动 想法&#xff1a; 前后一段时间内遇到了类似取交集的&#xff0c;从网上找到了两种写法&#xff0c;再结合GPT等…...

【深度学习】05-Rnn循环神经网络-01- 自然语言处理概述/词嵌入层/循环网络/文本生成案例精讲

循环神经网络&#xff08;RNN&#xff09;主要用于自然语言处理的。 循环神经网络&#xff08;RNN&#xff09;、卷积神经网络&#xff08;CNN&#xff09;和全连接神经网络&#xff08;FCN&#xff09;是三种常见的神经网络类型&#xff0c;各自擅长处理不同类型的数据。下面…...

基于JAVA+SpringBoot+Vue的电商平台的设计与实现

基于JAVASpringBootVue的电商平台的设计与实现 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1f345…...

CSS盒模型-怪异盒模型笔记-思维导图-案例等

文章目录 一、盒模型&#xff08;重点&#xff09;二、怪异盒模型三、块级元素和行内元素区别汇总四、块级元素和行内元素的转换(显示方式)||元素的显示和隐藏五、思维导图六、笔记资料 一、盒模型&#xff08;重点&#xff09; 所有HTML元素可以看作盒子。 CSS盒模型本质上是…...

RTX 4090显卡福利:Qwen2.5-VL-7B-Instruct轻量化部署,支持对话历史管理

RTX 4090显卡福利&#xff1a;Qwen2.5-VL-7B-Instruct轻量化部署&#xff0c;支持对话历史管理 1. 项目概述 Qwen2.5-VL-7B-Instruct是阿里通义千问推出的多模态大模型&#xff0c;专为视觉交互任务优化。本教程将展示如何在RTX 4090显卡上实现该模型的轻量化部署&#xff0c…...

SPIRAN ART SUMMONER跨平台适配:Windows/macOS/Linux下Streamlit祭坛兼容性

SPIRAN ART SUMMONER跨平台适配&#xff1a;Windows/macOS/Linux下Streamlit祭坛兼容性 1. 引言&#xff1a;当幻光祭坛遇见不同操作系统 想象一下&#xff0c;你刚刚在网络上看到了一个令人惊叹的AI图像生成工具——SPIRAN ART SUMMONER。它那充满《最终幻想10》风格的“幻光…...

Ubuntu16.04服务器上从零部署LaneNet车道线检测:Tusimple数据集处理全流程避坑指南

Ubuntu 16.04服务器部署LaneNet车道线检测全流程实战 在自动驾驶和智能交通系统中&#xff0c;车道线检测是一项基础而关键的技术。本文将详细介绍如何在Ubuntu 16.04服务器环境下&#xff0c;从零开始部署LaneNet车道线检测模型&#xff0c;并处理Tusimple数据集的全流程。不同…...

OpenClaw性能优化:降低GLM-4.7-Flash任务Token消耗的5个技巧

OpenClaw性能优化&#xff1a;降低GLM-4.7-Flash任务Token消耗的5个技巧 1. 为什么需要关注Token消耗 当我第一次在本地部署OpenClaw并接入GLM-4.7-Flash模型时&#xff0c;最让我震惊的不是它的自动化能力&#xff0c;而是执行简单任务后查看账单时的Token消耗数字。一个看似…...

OpenClaw智能邮件助手:nanobot镜像自动分类与回复重要邮件

OpenClaw智能邮件助手&#xff1a;nanobot镜像自动分类与回复重要邮件 1. 为什么需要智能邮件助手 每天早晨打开邮箱&#xff0c;看到堆积如山的未读邮件总是让人头疼。重要客户的询盘可能被埋没在促销广告中&#xff0c;紧急的协作请求可能因为延迟回复而影响项目进度。作为…...

# Kafka 消息队列实战指南

大数据开发核心技能&#xff1a;Kafka 架构原理、生产者消费者配置、Spark/Flink 集成、消息积压处理、数据一致性保障、生产环境案例&#xff0c;从 0 到 1 掌握企业级消息队列&#x1f4cc; 前言 真实生产问题 问题场景&#xff1a; 某电商公司数据平台遇到的问题&#xff1a…...

手把手教你用RTABMAP+T265在Windows10上实现室内三维扫描(含标定技巧)

手把手教你用RTABMAPT265在Windows10上实现高精度室内三维扫描 第一次接触室内三维扫描时&#xff0c;我被这项技术深深吸引——它能让物理空间瞬间数字化&#xff0c;就像给现实世界按下"CtrlC"。但真正动手配置RTABMAP和T265相机时&#xff0c;才发现这条路并不平坦…...

告别论文 ddl 焦虑!PaperZZ AI:本科毕业论文从 0 到 1 的极速生成攻略[特殊字符]

Paperzz-AI官网免费论文查重复率AIGC检测/开题报告/文献综述/论文初稿/期刊论文paperzz - 毕业论文-AIGC论文检测-AI智能降重-ai智能写作https://www.paperzz.cc/dissertation 还在为本科毕业论文熬大夜&#xff1f;选题没思路、文献找不到、大纲搭不起来、初稿写不出…… 无数…...

实战指南:基于快马生成电商订单自动化n8n工作流,无缝衔接shopify与crm

实战指南&#xff1a;基于快马生成电商订单自动化n8n工作流&#xff0c;无缝衔接shopify与crm 最近在帮朋友优化他们电商业务的后台流程&#xff0c;发现手动处理订单实在太费时间了。特别是遇到大促期间&#xff0c;订单量暴增&#xff0c;人工操作不仅效率低还容易出错。于是…...

Windows下OpenClaw安装指南:快速对接百川2-13B量化模型

Windows下OpenClaw安装指南&#xff1a;快速对接百川2-13B量化模型 1. 为什么选择OpenClaw百川2-13B组合 去年我在处理个人知识管理时&#xff0c;发现每天要重复执行大量机械操作&#xff1a;整理网页资料、归档PDF、生成日报。直到遇见OpenClaw这个能像人类一样操作电脑的A…...