Uniapp + Vue3 封装请求工具挂载全局

新建request.js工具类

const http = {// baseUrl 地址baseUrl: 'http://localhost:8080',// 请求方法request(config) {// config:请求配置对象,具体参照uniapp文档config = beforeRequest(config)// 请求地址拼接config.url = this.baseUrl + config.url// 异步请求return new Promise((resolve, reject) => {uni.request(config).then(res => {// 响应拦截const response = beforeResponse(res)resolve(response)}).catch(err => {errorHandle(err)reject(err)})})},get(url, data, auth, loading) {/*url:接口地址data:查询参数auth:请求是否携带token进行认证(true/false)method:请求方式*/return this.request({url: url,data: data,auth: auth,timeout: 10000,method: 'GET',loading: loading})},post(url, data, auth) {/*url:接口地址data:请求体参数auth:请求是否携带token进行认证(true/false)method:请求方式*/return this.request({url: url,data: data,auth: auth,timeout: 10000,method: 'POST'})},put(url, data, auth) {/*url:接口地址data:请求体参数auth:请求是否携带token进行认证(true/false)method:请求方式*/return this.request({url: url,data: data,auth: auth,timeout: 10000,method: 'PUT'})},delete(url, data, auth) {/*url:接口地址auth:请求是否携带token进行认证(true/false)method:请求方式*/return this.request({url: url,auth: auth,timeout: 10000,method: 'DELETE'})}
}// 请求拦截器
const beforeRequest = (config) => {// 请求之前拦截操作console.log('请求拦截器', config)if (!config.loading) {uni.showLoading({title: '拼命请求中',mask: true,})} else {uni.showLoading({title: config.loading,mask: true,})}config.header = {}if (config.auth && config.auth != undefined) {// 请求头中添加tokenif (uni.getStorageSync('token')) {// Authorization    Bearer   根据情况修改config.header['Authorization'] = 'Bearer ' + uni.getStorageSync('token')} else {// 为登陆则跳转登陆 重定向uni.navigateTo({url: '/pages/index/index'})}}return config
}// 响应拦截器
const beforeResponse = (response) => {// 请求之后操作console.log('响应拦截器', response)setTimeout(()=>{uni.hideLoading();},2000)// 判断请求返回的状态码if (response.status !== 200 && response.status !== 201 && response.status !== 204) {// 给出对应的提示if (response.data.error) {uni.showToast({title: response.data.error.toString(),icon: 'none',duration: 2000})}}return response
}// 请求异常处理器
const errorHandle = ((err) => {console.log('请求异常', err)
})export default http

在main文件中全局挂载、

// 导入封装的请求对象
import http from '@/util/request.js'
app.config.globalProperties.$http = http

在vue页面中使用

import type { ComponentInternalInstance } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance// 使用默认的loading
const response = await proxy?.$http.get('/auth/tenant/list')
// 自定义的loading
const response1 = await proxy?.$http.get('/auth/tenant/list',null,null,'loading')

备注:Vue3不可以像vue2那样子通过this对象去调用全局挂载对象,需要使用 getCurrentInstance 方法获取proxy 对象。

运行结果:

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

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

相关文章

前端性能优化四:精简html代码

1. 精简HTML代码: ①. 减少HTML嵌套,层级关系缩小.②. 减少DOM节点数.③. 减少无语义代码:a. 如:<div class"clear"></div>消除浮动,或者用css的方式处理.④. 删除http或者https:a. 如果URL的协议头恶化当前页面的协议头一致的.b. 或者此URL在多个协议头…

Linux-----14、vim

# vim Linux平台下的文本编辑器&#xff1a; emacs、nano、gedit、vi、vim vi&#xff08;visual editor&#xff09;编辑器通常被简称为vi&#xff0c;它是Linux和Unix系统上最基本的文本编辑器&#xff0c;类似于Windows 系统下的记事本。学会它后&#xff0c;我们将在Linu…

Vue数组变更方法和替换方法

一、可以引起UI界面变化 Vue 将被侦听的数组的变更方法进行了包裹&#xff0c;所以它们也将会触发视图更新。这些被包裹过的方法包括&#xff1a; push()pop()shift()unshift()splice()sort()reverse() 以上七个数组都会改变原数组&#xff0c;下面来分别讲解它们的区别&…

【Unity】【WebRTC】如何用Unity而不是浏览器接收远程画面

【背景】 之前几篇我们讨论了如何设置信令服务器&#xff0c;如何发送画面给远端以及如何用浏览器查看同步画面&#xff0c;今天来讨论如何实现Unity内部接收画面。 看本篇之前请先看过之前将web服务器设置和基本远程画面功能的几篇博文。&#xff08;同专栏下查看&#xff09…

Linux 脚本监控cpu输出到日志,每秒执行1次

vi test.sh while true; doecho date "%Y-%m-%d %H:%M:%S"", "$(top -bn1 | grep "Cpu(s)" | awk {print $1$2$3}) >> cpu_log.txtsleep 1 done top -bn1 | grep "Cpu(s)" 表示打印top命令的输出结果。 sleep 1 表示睡眠1秒…

TDengine 签约中船九院,助力航运业智能化转型升级

在大数据时代背景下&#xff0c;船舶智能化已经成为船舶制造与航运领域发展的必然趋势。智能船舶作为《中国制造 2025》中明确重点发展的领域&#xff0c;代表了船舶未来的方向&#xff0c;对于航运业的转型升级至关重要。其中&#xff0c;大数据的处理和运用成为船舶智能化转型…

每日一题(LeetCode)----栈和队列--逆波兰表达式求值

每日一题(LeetCode)----栈和队列–逆波兰表达式求值 1.题目&#xff08;150. 逆波兰表达式求值&#xff09; 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算…

如何通过宝塔面板搭建一个MySQL数据库服务并实现无公网ip远程访问?

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几步,通过宝塔面板cp…

python-dlib实现人脸提取和分割

效果 → 参考资料和资源 GitHub - Onwaier/SegfaceAndAlignByDlib: 用dlib实现脸部分割和人脸对齐 shape_predictor_68_face_landmarks.dat 下载地址_shape_predictor_68_face_landmarks.dat下载-CSDN博客 未运行的参考资料 dlib实现脸部分割与人脸对齐 - 知乎 py代码 &…

自定义通用物联网网关的MIB结构的参考

文章目录 说明参考代码开源项目地址 说明 由于时间有限&#xff0c;本人精力有限&#xff0c;所以给出的网关MIB结构&#xff0c;并非完美&#xff01;本文网关MIB结构的结构定义构思在使用MIB builder自定义物联网网关的MIB结构欢迎小伙伴&#xff0c;点赞、关注和评论&#…

【Lidar】Open3D点云DBSCAN聚类算法:基于密度的点云聚类(单木分割)附Python代码

1 DBSCAN算法介绍 DBSCAN聚类算法是一种基于密度的聚类算法&#xff0c;全称为“基于密度的带有噪声的空间聚类应用”&#xff0c;英文名称为Density-Based Spatial Clustering of Applications with Noise。 DBSCAN聚类算法能够发现任意形状的类别&#xff0c;并且对噪音数据具…

全网最全pytest大型攻略,单元测试学这就够了!

pytest 是一款以python为开发语言的第三方测试&#xff0c;主要特点如下&#xff1a; 比自带的 unittest 更简洁高效&#xff0c;兼容 unittest框架支持参数化可以更精确的控制要测试的测试用例丰富的插件&#xff0c;已有300多个各种各样的插件&#xff0c;也可自定义扩展&am…

数字化时代的智能支持:亚马逊云科技轻量应用服务器技术领先

轻量应用服务器是一种简化运维、门槛低的弹性服务器&#xff0c;它的"轻"主要体现在几个方面&#xff1a;开箱即用、应用优质、上手简洁、投入划算、运维简便以及稳定可靠。相较于普通的云服务器&#xff0c;轻量应用服务器简化了云服务的操作难度、使用和管理流程&a…

mysql:查询服务器当前打开的连接数量

使用命令show global status like Threads_connected;可以查询mysql服务器当前打开的连接数量。 例如&#xff0c;查询如下&#xff1a; 启动应用&#xff0c;连接数据库&#xff0c;占用了1个连接&#xff0c;再查询如下&#xff1a; 由输出可以看出&#xff0c;打开的连接…

低代码和纯代码:双向奔赴,共创未来ing……

低代码开发是近年来迅速崛起的软件开发方法&#xff0c;让编写应用程序变得更快、更简单。有人说它是美味的膳食&#xff0c;让开发过程高效而满足&#xff0c;但也有人质疑它是垃圾食品&#xff0c;缺乏定制性与深度。你认为低代码到底是美味的膳食还是垃圾食品呢&#xff0c;…

【方案】如何利用大数据+云计算技术打造智能环境监控系统?

小编在之前的文章中也提到过基于云计算的环境智能监控系统是什么样的&#xff0c;收到了很多朋友的关注&#xff0c;今天小编就再次根据智能监控为切入点&#xff0c;深入讲解智能环境监控系统方案的详细落实。 1、传感器节点&#xff1a;首先需要选择适合应用场景的各类传感器…

Actuator内存泄露及利用Swagger未授权自动化测试实现

目录 0x00 前言 0x01 Actuator 泄露及利用 1、Actuator heapdump 内存泄露 2、知道泄露后如何进一步利用 3、如何发现 Actuator 泄露&#xff08;白盒/黑盒&#xff09; 0x02 Swagger自动化测试 1、什么是Swagger&#xff1f; 2、PostmanBurpSuiteXray 联动 3、思考 0x…

JavaAwtSwing的JFrame的pack()方法,容器适配子组件大小,笔记231220

pack()是extends自Window类的方法 使此窗口的大小适合其子组件的首选大小和布局。如果其中一个尺寸小于上一次调用setMinimumSize方法指定的最小尺寸&#xff0c;则会自动放大窗口的宽度和高度。 如果窗口和/或其所有者还不可显示&#xff0c;则在计算首选大小之前&#xff0…

tf卡数据恢复怎么做?记好这4个步骤!

“为了更好的保存数据&#xff0c;我一直都是用TF卡的。很多重要的文件和数据都保存在里面。但是我最近使用时&#xff0c;发现有部分数据丢失了。不知道该怎么办&#xff0c;有没有朋友可以帮帮我呀&#xff1f;” TF卡是一种闪存存储卡&#xff0c;通常用于手机、平板电脑和其…

[Java 基础] Java Stream

Java Stream 是 Java 8 引入的新特性之一&#xff0c;它提供了一种新的处理数据集合的方式。Stream 可以使我们更加方便地对集合进行处理和操作&#xff0c;同时还能提高代码的简洁性和可读性。 文章目录 什么是 Stream常见用法创建 Stream中间操作终端操作 总结 什么是 Stream…