uniapp 网络请求封装(uni.request 与 uView-Plus)
一、背景
在开发项目中,需要经常与后端服务器进行交互;为了提高开发效率和代码维护性,以及降低重复性代码,便对网络请求进行封装统一管理。
二、创建环境文件
2.1、根目录新建utils文件夹,utils文件夹内新建env.js文件
2.2、env.js文件
let BASE_URL
//开发环境中
if (process.env.NODE_ENV === 'development') {// 开发环境BASE_URL = 'http://xxxx' //开发环境请求地址
} else {// 生产环境BASE_URL = 'https://xxxx' //生成环境请求地址
}export default BASE_URL
⭐⭐说明:
创建的是vue3项目,与vue2项目的区别在于页面中调用api的写法不同,具体以需求为主
以下是两种uniapp请求的封装,分别为👇👇:
①uni.request 请求封装,②uniapp+uview-plus 请求封装
✍✍两种请求封装,根据需求二选一,不能同时使用
三、uni.request 请求封装(方法一)
3.1、官网地址👉:uni.request(OBJECT) | uni-app官网
3.2、在utils文件夹下创建request.js文件,用于封装请求
备注:在发送uni.request请求之前,可以执行拦截操作;在uni.request的success中接收响应后处理响应数据
import BASE_URL from '@/env.js' //引入接口共用地址
import useUserStore from '@/store/user.js' //引入仓库,使用的是pinia
export const request = (options) => {return new Promise((resolve, reject) => {// 获取用户令牌let token = useUserStore().token// 设置请求头const header = {'Content-Type': 'application/json',Authorization: `Bearer ${token}`,...options.header // 可以传入额外的请求头参数}// ⭐在发送请求之前执行拦截操作uni.request({url: BASE_URL + options.url, //接收请求的APImethod: options.method || 'GET', //接收请求的方式,如果不传默认为GETdata: options.data || {}, //接收请求的data,不传默认为空header: header, //接收请求的headersuccess(res) {// ⭐在这里处理接收到响应后处理响应数据if (res.data.code != 0) {// 提示重新登录uni.$showMsg('请登录')useUserStore().userLogout()setTimeout(() => {uni.switchTab({url: '/pages/my/my'})}, 1000)}resolve(res.data) // 使用resolve将数据传递出去},fail: (err) => {reject(err)}})})
}
3.3、在utils文件夹下创建api.js文件
api.js文件是用来调用封装好的uni.request,统一管理请求接口,在后续开发中只需要调用api.js文件即可
import {request} from './request.js' //导入封装好的js文件//登录 post请求
export const login = (data)=>{return request({url:'wx-api/login',method:'post',data:data})
}//用户信息 get请求
export const info = ()=>{return request({url:'/wx-api/me/info',})
}
3.4、页面调用api文件使用
<script setup>
import { login } from '@/utils/api.js'
//点击登录按钮操作
const getToken = async () => {let res = await login()console.log('res', res)
}
</script>
四、uniapp+uview-plus 请求封装(方法二)
4.1、前提条件:项目中引入uview-plus
具体操作可查看之前写的文章👉:uniapp使用 uview-plus 和 Pinia(vue3项目)_翻滚的露西的博客-CSDN博客
uview-plus官网地址👉: Http请求 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
4.2、 在utils文件夹下创建request.js文件,用于封装请求
在此可以书写请求和响应拦截
import BASE_URL from '@/env.js' //引入接口共用地址
import useUserStore from '@/store/user.js' //引入仓库,使用的是pinia
export const setRequestConfig = () => {uni.$u.http.setConfig((config) => {/* config 为默认全局配置*/config.baseURL = BASE_URLreturn config})// 请求拦截uni.$u.http.interceptors.request.use((config) => {let token = useUserStore().tokenif (token) {config.header.Authorization = `Bearer ${token}`}return config},(error) => {return Promise.reject(error)})// 响应拦截uni.$u.http.interceptors.response.use((response) => {if (response.data.code == 401) {// 提示重新登录uni.$showMsg('请登录')useUserStore().userLogout()setTimeout(() => {uni.switchTab({url: '/pages/my/my'})}, 1000)}return response},(error) => {return Promise.reject(error)})
}
4.3、在utils文件夹下创建api.js文件
api.js文件是用来调用uview-plus封装好的请求,统一管理请求接口,在后续开发中只需要调用api.js文件即可
import { setRequestConfig } from './request.js';// 调用setRequestConfig函数进行请求配置
setRequestConfig();
const http = uni.$u.http
// 发起登录请求 post请求
export const requestLogin = (data) => http.post('/wx-api/login', data);
//获取个人中心信息 get请求
export const requestUserInfo = () => http.get('/wx-api/me/info')
4.4、页面调用api文件使用
<script setup>
import { requestLogin } from '@/utils/api.js'
//点击登录按钮操作
const getToken = async () => {let res = await requestLogin()console.log('res', res)
}
</script>
相关文章:
uniapp 网络请求封装(uni.request 与 uView-Plus)
一、背景 在开发项目中,需要经常与后端服务器进行交互;为了提高开发效率和代码维护性,以及降低重复性代码,便对网络请求进行封装统一管理。 二、创建环境文件 2.1、根目录新建utils文件夹,utils文件夹内新建env.js文…...
Jtti.cc:站群服务器SEO优化建议,如何分配多IP?
站群优化的核心目标之一是尽可能通过多个网站互相引导流量,从而提升主站的权重。这时候,多IP的分配至关重要,因为搜索引擎会检测到同一IP下的网站之间的关联性。如果一个IP地址下有过多的相似站点,搜索引擎可能会认为这些站点存在…...
银行系统功能架构设计元模型
1. 元模型核心目标 规范性:定义功能模块的标准化描述方式,便于跨团队协作。可复用性:抽象通用组件,减少重复开发。可扩展性:支持未来业务创新和技术升级(如开放银行API集成)。2. 元模型层级结构 采用分层架构模式,分为以下核心层级: **(1) 业务功能层** …...
uniapp写的h5跳转小程序
使用场景: 我们对接第三方支付的时候,对方只提供了原生小程序id和appid,由我们的app和h5平台跳转至小程序。 遇到的问题: app跳转本地正常,线上报错如下 解决办法: 需要去微信开放平台申请应用appid 易…...
DeepSeek点燃AI大模型战火:编程语言争霸,谁将问鼎“终极武器”王座?
DeepSeek点燃AI大模型战火:编程语言争霸,谁将问鼎“终极武器”王座? 一、DeepSeek:AI大模型竞赛的“导火索” 2023年,中国AI公司深度求索(DeepSeek)发布DeepSeek-R1大模型,凭借其超…...
游戏引擎学习第123天
仓库:https://gitee.com/mrxiao_com/2d_game_3 黑板:线程同步/通信 目标是从零开始编写一个完整的游戏。我们不使用引擎,也不依赖任何库,完全自己编写游戏所需的所有代码。我们做这个节目不仅是为了教育目的,同时也是因为编程本…...
钉钉快捷免登录 通过浏览器打开第三方系统,
一、钉钉内跳转至浏览器的实现 使用钉钉JSAPI的跳转接口 在钉钉内通过dd.biz.navigation.openLink方法强制在系统浏览器中打开链接。此方法需在钉钉开发者后台配置应用权限,确保应用具备调用该API的资格37。 示例代码: dd.ready(() > {dd.biz.navigat…...
塔能科技构建智慧隧道生态系统——城市升级改造的协同创新典范
一、智慧隧道生态系统的概念与意义 (一)概念解析 智慧隧道生态系统是一个涵盖多方面协同关系的复杂概念。在隧道建设方面,它不仅仅是简单的挖掘和结构搭建,而是将智能化技术融入其中,例如采用先进的传感器技术&#x…...
在Anaconda的虚拟环境中安装R,并在vscode中使用
在 Anaconda 的虚拟环境中使用 R,并且希望在 VS Code 中同时使用 Python 和 R,确实需要同时安装 Python 和 R。这是因为 VS Code 的 Jupyter 插件和内核管理依赖于 Python,而 R 则作为 Jupyter 的另一个内核运行。 以下是具体的操作步骤和逻…...
创建型模式 - 建造者模式 (Builder Pattern)
创建型模式 - 建造者模式 (Builder Pattern) 建造者模式是一种创建型设计模式,它将一个复杂对象的构建与表示分离,使得同样的构建过程可以创建不同的表示。 需求描述 在游戏开发中,创建一个复杂的游戏角色,角色具有多种属性&…...
路由追踪核心技术深度解析:Traceroute与Tracert命令实战指南(跨平台/抓包/网络安全防护)
目录 路由器是什么? 路由器的基本功能: 路由追踪技术(Traceroute) 路由追踪的工作原理 实现技术 路由追踪的输出示例 路由追踪的用途 traceroute 命令(Linux 和 macOS) 基本语法 常用选项 示例 …...
音视频入门基础:RTP专题(12)——RTP中的NAL Unit Type简介
一、引言 RTP封装H.264时,RTP对NALU Header的nal_unit_type附加了扩展含义。 由《音视频入门基础:H.264专题(4)——NALU Header:forbidden_zero_bit、nal_ref_idc、nal_unit_type简介》可以知道,nal_unit…...
HTTP GET 请求示例
鸿蒙操作系统(HarmonyOS)是华为公司自主研发的面向全场景的分布式操作系统,旨在为用户提供一个安全、流畅且跨设备无缝连接的体验。它支持多种终端设备,如智能手机、平板电脑、智能电视、汽车等,并实现了模块化解耦&am…...
GO 快速升级Go版本
由于底层依赖升级了,那我们也要跟着升,go老版本已经不足满足需求了,必须要将版本升级到1.22.0以上 查看当前Go版本 命令查看go版本 go version [rootlocalhost local]# go version go version go1.21.4 linux/amd64 [rootlocalhost local]# …...
ELK搭建初入
ELK搭建: 1、安装ElasticSearch (用于存储收集到的日志信息) 解压安装包 tar -xzvf elasticsearch-8.17.2-linux-x86_64.tar.gz 启动es:bin/elasticsearch –d(默认端口号9200) 浏览器输入es地址。出现…...
【redis】数据类型之Bitfields
Redis的Bitfields(位域)与Bitmaps一样,在Redis中并不是一种独立的数据类型,而是一种基于字符串的数据结构,用于处理位级别的操作。允许用户将一个Redis字符串视作由一系列二进制位组成的数组,并对这些位进行…...
vscode软件中引入vant组件
一、vant简介 Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。 官网:介绍 - Vant Weapp 里面的快速上手的教程&a…...
DDR3模块、HDMI、晶振的布局原则
DDR3模块的布局原则 1.1片DDR就尽量靠近 我们CPU去摆放 2.DDRx2片,相对CPU需要严格对称 3.DDR滤波电容靠近管脚进行放置 4.端接匹配电阻摆放:串联端接电阻放置CPU端,并联端接电阻放置DDR端 5.地址线、控制线、时钟线都是单向传输,…...
夜莺监控 - 边缘告警引擎架构详解
前言 夜莺类似 Grafana 可以接入多个数据源,查询数据源的数据做告警和展示。但是有些数据源所在的机房和中心机房之间网络链路不好,如果由 n9e 进程去周期性查询数据并判定告警,那在网络链路抖动或拥塞的时候,告警就不稳定了。所…...
【CSP/信奥赛通关课(六):信奥赛STL专题】
CSP/信奥赛通关课(六):信奥赛STL专题 课程简介: 讲解信奥赛C中的STL核心组件:容器、迭代器、算法等,分析重点案例,让学生在实践的过程中熟练掌握信奥赛C相关的STL重要知识点。 课程教学目标&…...
【数据结构初阶第十五节】堆的应用(堆排序 + Top-K问题)
必须有为成功付出代价的决心,然后想办法付出这个代价。云边有个稻草人-CSDN博客 对于本节我们要提前掌握前一节课堆的相关实现才能学好本次的知识,一定要多画图多敲代码看看实现的效果是啥(Crazy!)开始吧! …...
SSL/TLS 协议、SSL证书 和 SSH协议 的区别和联系
下面是 SSL/TLS 协议、SSL证书 和 SSH协议 的区别和联系,包含它们的英文全称和中文全称: 属性SSL/TLS 协议SSL证书SSH 协议英文全称Secure Sockets Layer / Transport Layer SecuritySecure Sockets Layer CertificateSecure Shell Protocol中文全称安全…...
数据结构与算法-图论-最短路和其他的结合
介绍 最短路算法常与深度优先搜索(DFS)、动态规划(DP)、二分答案、拓扑排序等算法结合使用: - 最短路与DFS结合:在一些图的路径问题中,当需要访问特定的多个结点,且数据范围较小时…...
C++day6
编写一个如下场景: 有一个英雄Hero类,私有成员,攻击,防御,速度,生命值,以及所有的set get 方法 编写一个 武器 Weapon 类,拥有私有成员攻击力,以及set get 方法 编写一个…...
【初阶数据结构】星河中的光影 “排” 象:排序(下)
文章目录 4.交换排序4.1 冒泡排序(BubbleSort)4.2 快速排序(QuickSort)4.2.1 hoare版本4.2.2 挖坑法4.2.3 前后指针法4.2.4 非递归实现 5.归并排序(MergeSort)5.1 递归实现5.2 非递归实现5.2.1 一次性全部拷…...
C++ 练习1
阐述g 有哪些常用的选项,该选项有什么作用 选项作用-o <file>指定输出文件名(默认生成 a.out)-c仅编译生成目标文件(.o 文件),不链接-E只进行预处理,输出预处理后的代码(展开…...
Ajax数据采集与分析详解
文章目录 1. 什么是 Ajax?2. Ajax 的工作原理3. Ajax 在网页中的应用场景4. 爬取 Ajax 数据的方法4.1 分析网络请求4.2 模拟 Ajax 请求4.3 使用 Selenium 模拟浏览器4.4 使用 Headless 浏览器 5. 处理动态参数6. 处理分页和滚动加载7. 处理反爬虫机制8. 数据存储9. …...
协方差(Covariance)与得分函数:从Fisher信息矩阵看统计关联
协方差与得分函数:从Fisher信息矩阵看统计关联 协方差(Covariance)是统计学中一个基础但强大的概念,它描述了两个随机变量之间的关系。在Fisher信息矩阵中,协方差以一种特别的形式出现:得分函数的协方差。…...
【CSS 选择器的特异度 CSS 继承 CSS 求值过程解析 CSS 布局方式及相关技术】
以下是关于 CSS 选择器特异度、继承、求值过程及布局技术 的详细解析,结合核心概念和实际应用场景: 一、CSS 选择器特异度(Specificity) 1. 特异度规则 特异度用于决定当多个选择器作用于同一元素时,哪个样式优先级更…...
Vue+ElementPlus的一些问题修复汇总
目录 一、ElementPlusVue-router做侧边栏问题 二、 组件样式问题 2.1修改文字颜色、大小、粗细、边框的颜色 2.2修改聚焦后文字的颜色、边框的颜色 2.3修改鼠标悬浮时文字的颜色、边框的颜色 三、 组件样式问题 3.1修改文字颜色、大小、粗细 四、 样式问题 4.1当数据为空…...
单链表删除算法(p=L; j=0;与p=p->next;j=1的辨析)
算法描述 Status ListDelete(LinkList &L,int i) { //在带头结点的单链表 L 中,删除第 i 个元素 pL; j0; while ((p->next) && (j<i-1)) {pp->next; j;} if (!(p->next)||(j>i-1)) return ERROR; qp->nex…...
从单片机的启动说起一个单片机到点灯发生了什么下——使用GPIO点一个灯
目录 前言 HAL库对GPIO的抽象 核心分析:HAL_GPIO_Init 前言 我们终于到达了熟悉的地方,对GPIO的初始化。经过漫长的铺垫,我们终于历经千辛万苦,来到了这里。关于GPIO的八种模式等更加详细的细节,由于只是点个灯&am…...
vue2项目打包后js文件过大, 首次加载缓慢
vue2项目打包后js文件过大, 首次加载缓慢 安装插件 npm i compression-webpack-plugin6.1.1 -D配置vue.config.js const CompressionWebpackPlugin require(compression-webpack-plugin)module.exports {configureWebpack: {plugins:[new CompressionWebpackPlugin({filen…...
llama.cpp 一键运行本地大模型 - Windows
文章目录 llama.cpp 一键运行本地大模型 - Windows嘿,咱来唠唠 llama.cpp 这玩意儿!gguf 格式是啥?咱得好好说道说道基座模型咋选?所需物料,咱得准备齐全咯核心命令,得记牢啦运行方式咋选?测试应…...
Android 老项目 jcenter 库失效
最近重新维护了一些老项目发现大部分jcenter库失效了, Could not resolve com.xx:2.1.3. 如果你也遇到了,不妨试试 替换为 aliyun的jcenter服务,就不用一个个找代替库了。 project 下的 build.gradle 文件添加: maven { url htt…...
MyBatis简明教程
MyBatis 是一个用于简化数据库操作的持久层框架,它的核心思想是 将 SQL 与 Java 代码解耦,让开发者专注于 SQL 的编写,同时自动处理重复的数据库操作步骤。 一、核心思想:SQL 与 Java 解耦 传统 JDBC 需要开发者手动管理数据库连…...
【Golang 面试题】每日 3 题(六十八)
✍个人博客:Pandaconda-CSDN博客 📣专栏地址:http://t.csdnimg.cn/UWz06 📚专栏简介:在这个专栏中,我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞👍收藏…...
DeepSeek个人知识库
deepseek构建个人知识库 安装软件链接 : 安装链接 先在本地把deepseek跑起来,本地部署deepseek见前文链接: 本地部署ollama # 目前软件只支持1.5b小模型,将就着用 ollama run deepseek-r1:1.5b等服务器启动后开启软件 上传文件 输入消息 (…...
力扣练习之字符串的最大公因子
使用语言:c 题目: 对于字符串 s 和 t,只有在 s t t t ... t t(t 自身连接 1 次或多次)时,我们才认定 “t 能除尽 s”。 给定两个字符串 str1 和 str2 。返回 最长字符串 x,要求满足 x 能…...
姿态矩阵/旋转矩阵/反对称阵
物理意义,端点矢量角速率叉乘本身向量; 负号是动系b看固定系i是相反的; 一个固定 在惯性导航解算中,旋转矢量的叉乘用于描述姿态矩阵的微分方程。你提到的公式中, ω i b b \boldsymbol{\omega}_{ib}^b \times ωibb…...
项目一 - 任务3:搭建Java集成开发环境IntelliJ IDEA
通过本次实战,我们成功搭建了Java集成开发环境IntelliJ IDEA,并完成了多个任务。首先,安装了IntelliJ IDEA并进行了个性化设置,如选择主题、调整字体和编码等。接着,创建了Java项目、包和类,编写并运行了简…...
C++的类型转换
目录 一、隐式类型转换的触发场景 1.基本数据类型间的转换 i.提升转换 ii.截断转换 2.类与对象的转换 i.单参数构造函数 ii.类型转换运算符 3.继承体系中的指针/引用转换 向上转型 二、隐式转换的风险与问题 1.意外行为 2.二义性错误 3.性能损耗 三、C强制类型转…...
嵌入式项目:STM32刷卡指纹智能门禁系统
本文详细介绍基于STM32的刷卡指纹智能门禁系统。 获取资料/指导答疑/技术交流/选题/帮助,请点链接: https://gitee.com/zengzhaorong/share_contact/blob/master/stm32.txt 1 系统功能 1.1 功能概述 本系统由STM32硬件端(下位机)…...
DeepSeek基础之机器学习
文章目录 一、核心概念总结(一)机器学习基本定义(二)基本术语(三)假设空间(四)归纳偏好(五)“没有免费的午餐”定理(NFL 定理) 二、重…...
Docker 搭建 Nginx 服务器
系列文章目录 Docker 搭建 Nginx 服务器 系列文章目录前言一、准备工作二、设置 Nginx 容器的目录结构三、启动一个临时的 Nginx 容器来复制配置文件四、复制 Nginx 配置文件到本地目录五、删除临时 Nginx 容器六、创建并运行 Nginx 容器,挂载本地目录七、修改 ngin…...
【Docker基础】理解 Docker:本质、性质、架构与核心组件
文章目录 Docker 本质Docker 的引擎迭代Docker 和虚拟机的区别Docker 为什么比虚拟机资源利用率高,速度快?Docker 和 JVM 虚拟化的区别Docker 版本1. LXC (Linux Containers)2. libcontainer3. Moby4. docker-ce5. docker-ee总结: Docker 架构…...
QT:QLinearGradient、QRadialGradient、QConicalGradient
QLinearGradient QLinearGradient 是 Qt 框架中用于创建线性渐变的类,它允许在图形绘制中实现颜色沿着一条直线的平滑过渡效果。以下是关于 QLinearGradient 的详细介绍: 基本概念:线性渐变是指颜色从一个点(起始点)沿…...
MySql:Authentication plugin ‘caching sha2 password‘ cannot be loaded
报错问题解释 在 MySQL 数据库中,如果你尝试使用 caching_sha2_password 插件进行认证,但是遇到错误信息 "Authentication plugin caching sha2 password cannot be loaded",这通常意味着客户端库或者连接器不兼容或者没有正确配置…...
c++类知识点复习与总结
类 c 是一种人机交互的面向对象的编程语言,面向对象思想主要体现在 类 上。 类是具有相同属性和相同行为的对象的集合, 具有封装,继承,多态的特性。 类的定义 class 类名 { }; 封装 例如:人就是一种类…...
Redis快速入门
一、Redis介绍 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构,如 字符串(strings),散列(has…...