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,一经查实,立即删除!

相关文章

Linux-----14、vim

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

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

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

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

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

如何通过宝塔面板搭建一个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代码 &…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Linux shell编程学习笔记37:readarray命令和mapfile命令

目录 0 前言1 readarray命令的格式和功能 1.1 命令格式1.2 命令功能1.3 注意事项2 命令应用实例 2.1 从标准输入读取数据时不指定数组名,则数据会保存到MAPFILE数组中2.2 从标准输入读取数据并存储到指定的数组2.3 使用 -O 选项指定起始下标2.4 用-n指定有效行数…

北斗高精度基坑安全监测系统解决方案

目录 1.概述 1.1背景 1.2设计原则 1.3建设内容 2.系统架构 2.1总体架构 2.2拓扑图 2.3云平台 2.3.1概述 2.3.2技术架构 2.3.3平台功能 2.4监测子系统 2.4.1位移监测子系统 2.4.2应力监测子系统 2.4.3环境监测子系统 1.概述 1.1背景 基坑监测是基坑工程施工中的…

一个前端大佬的十年回顾 | 漫画前端的前世今生

作者:京东科技 胡骏 引言 岁月如梭,十载流年 前端技术,蓬勃向前 HTML,CSS,JavaScript 演绎出璀璨夺目的技术画卷 回到十年前,前端技术就像一名戴着厚重眼镜的书呆子,总是小心翼翼&#xff…

车载蓝牙物联网解决方案

车载蓝牙物联网解决方案是一种基于蓝牙技术,结合物联网技术的智能车载系统。它利用蓝牙技术将智能手机、智能手表、智能车载设备等连接起来,实现设备之间的无缝通信和数据共享,为驾驶者提供更加便捷、安全和智能的驾驶体验。 车载蓝牙物联网解…

Flask重定向后无效果前端无跳转无反应问题

在网上搜了一下并没有什么好的解决方案,有的话也只是告诉你如何修改代码,并没有讲明白其中的原理以及导致问题的核心,因此特意去了解了一下HTTP的规范找到了答案 问题说明 问题出现的流程大致都是前端发送Ajax请求给后端,进行一些…

【愚公系列】2023年12月 HarmonyOS教学课程 037-ArkUI事件(焦点事件)

🏆 作者简介,愚公搬代码 🏆《头衔》:华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主&#xf…