uniapp 封装请求

news2024/12/23 3:30:14

新建request文件夹 下新建index.js 和index.js 

或者创建units文件放入index.js 和api文件夹放入index.js(api.js)//看公司规范

1. index.js

// 全局请求封装
// const base_url = 'http://localhost:8080/devapi'
var base_url = process.env.NODE_ENV === 'development' ? 'http://localhost:8080/devapi' : 'http://localhost:8080/devapi'
//这个基本地址可替换成你需要的地址

// 请求超出时间
const timeout = 5000

// 需要修改token,和根据实际修改请求头
export default (params) => {
	let url = params.url;
	let method = params.method || "get";
	let data = params.data || {};
	let header = {
		// 'Blade-Auth': uni.getStorageSync('token') || '',
		// 'Content-Type': 'application/json;charset=UTF-8',
		// 'Authorization': 'Basic c2FiZXI6c2FiZXJfc2VjcmV0',
		// 'Tenant-Id': uni.getStorageSync('tenantId') || 'xxx', // avue配置相关
		// ...params.header
	}
	if (method == "post") {
		header = {
			'Content-Type': 'application/json'
		};
	}
	return new Promise((resolve, reject) => {
		uni.request({
			url: base_url + url,
			method: method,
			header: header,
			data: data,
			timeout,
			success(response) {
				const res = response
				// 根据返回的状态码做出对应的操作
				//获取成功
				// console.log(res.statusCode);
				if (res.statusCode == 200) {
					resolve(res.data);
				} else {
					uni.clearStorageSync()
					switch (res.statusCode) {
						case 401:
							uni.showModal({
								title: "提示",
								content: "请登录",
								showCancel: false,
								success() {
									setTimeout(() => {
										uni.navigateTo({
											url: "/pages/login/index",
										})
									}, 1000);
								},
							});
							break;
						case 404:
							uni.showToast({
								title: '请求地址不存在...',
								duration: 2000,
							})
							break;
						default:
							uni.showToast({
								title: '请重试...',
								duration: 2000,
							})
							break;
					}
				}
			},
			fail(err) {
				console.log(err)
				if (err.errMsg.indexOf('request:fail') !== -1) {
					uni.showToast({
						title: '网络异常',
						icon: "error",
						duration: 2000
					})
				} else {
					uni.showToast({
						title: '未知异常',
						duration: 2000
					})
				}
				reject(err);

			},
			complete() {
				// 不管成功还是失败都会执行
				uni.hideLoading();
				uni.hideToast();
			}
		});
	}).catch(() => {});
};

base_url也可创建文件定义

  • .env:默认的配置文件,所有环境都会加载这个文件(如果它存在的话)。
  • .env.development:仅在开发环境(当NODE_ENV被设置为development时)加载的配置文件。
  • .env.test:仅在测试环境(当NODE_ENV被设置为test时)加载的配置文件。
  • .env.production:仅在生产环境(当NODE_ENV被设置为production时)加载的配置文件。

2. api.js

// 引入 request 文件
import request from './index.js'

// 获取所有用户列表
export const getUserListApi = () => {
	return request({
		url: '/user/list',
		method: 'get',
		header: {} // 自定义
	})
}

3. 使用

	//引入
	import {
		getUserListApi
	} from '@/request/api.js'


    onLoad() {
			getUserListApi().then(res => {
				console.log(res, 'res');
			}).catch(err => {

			})
		},

下篇会解释如何处理跨域问题

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

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

相关文章

Ubuntu24.04(22.04+版本通用)Miniconda与Isaacgym

1. ubuntu24.04安装minicondda mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh解释下这段代码 bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3~/miniconda3/miniconda.sh: 指向Mi…

UE5 02-给物体一个扭矩力

需要注意的是: 1.弹簧臂 可以使用绝对旋转 这样就可以不跟随父物体Player的旋转 2.弹簧臂 进行碰撞测试勾选,当这个弹簧线被遮挡,摄像机会切换到碰撞点位置 进行碰撞测试勾选,当这个弹簧线被遮挡,摄像机不会切换到碰撞点位置

SD-WebUI视频重绘:TemporalKit+EbsynthUtility避坑指南

AI视频重绘,在当下大家并不陌生。我们的实现方式大致可以分为三种: 第三方平台和discord上转绘,如DomoAI ,GoEnhance AI 等。 优点:效果佳,门槛低。 缺点:需要科学上网,和支付一定的使用费用。…

Android设备信息(DevInfo)

软件介绍 设备信息(DevInfo)一款评分非常不错的手机硬件及各种信息检测应用,安卓设备硬件检测工具。可以全面查看手机的各种信息、包括:Android系统版本的详细信息、芯片CPU处理器的详细信息、全球卫星定位、测试功能、硬件温度、…

image媒体组件属性配合swiper轮播

图片组件&#xff08;image&#xff09; 先插入个图片试试&#xff0c;插入图片用src属性&#xff0c;这是图片&#xff1a; 代码如下&#xff1a; <template><view><swiper indicator-dots indicator-color "#126bae" indicator-active-color &…

高效生产力,手机也能工作#MixCopilot工作流

从一个DEMO说起&#xff1a; 制作完DEMO&#xff0c;体验完这一个手机专用的工作流之后&#xff0c;我感觉我以后再也不用待电脑前了&#xff0c;可以躺着玩手机了。。。 然后&#xff0c;我花了点时间把这个流程优化了&#xff0c;目前在MixCopilot的内部测试版已经支持此项功…

发送微信消息和文件

参考&#xff1a;https://www.bilibili.com/video/BV1S84y1m7xd 安装&#xff1a; pip install PyOfficeRobotimport PyOfficeRobotPyOfficeRobot.chat.send_message(who"文件传输助手", message"你好&#xff0c;我是PyOfficeRobot&#xff0c;有什么可以帮助…

【论文阅读】-- Strscope:不规则测量的时间序列数据的多尺度可视化

Stroscope: Multi-Scale Visualization of Irregularly Measured Time-Series Data 摘要1 引言2相关工作2.1&#xff08;大型&#xff09;时间序列数据可视化2.2 事件序列数据可视化2.3 评价 3问题分析3.1 数据集3.2 场景——现状3.3 设计流程3.4 设计原理 4 涟漪图&#xff1a…

JavaScrip——switch类型

目录 任务描述 相关知识 严格相等 switch语句 编程要求 任务描述 北美五大湖的名称和面积如下&#xff1a; 名称面积(平方公里)Superior82414Huron59600Michigan58016Erie25744Ontario19554 本关任务&#xff1a;根据面积判断湖泊的名字。 相关知识 上一关讲解的是拥…

Vulhub——struct2

文章目录 一、Struct21.1 Struct2简介1.2 判断Struct2框架1、URL中添加不存在路径2、URL添加/struts/domTT.css3、404、500响应码返回信息 4、URL 二、struct2相关漏洞复现2.1 s2-001手工复现工具探测 2.2 s2-005手工复现工具探测 2.3 s2-007手工复现工具检测 2.4 s2-008手工复…

修复 OpenSSH 爆出极其严重的安全漏洞!

最近几天OpenSSH爆出了一个高危漏洞&#xff1a;CVE-2024-6387&#xff0c;影响到了很多的Linux服务器系统。明月第一时间给所有的代维客户服务器进行了排查和漏洞修复&#xff0c;因此耽搁了一些时间。直到今天才算抽出空来给大家分享一下。严格上来说这个漏洞的危险性还是极高…

mongdb学习与使用

1. 基础概念 MongoDB简介&#xff1a; MongoDB是一个基于文档的NoSQL数据库&#xff0c;具有高性能、高可用性和易扩展性。数据存储在类似JSON的BSON格式中。 基本术语&#xff1a; Database&#xff08;数据库&#xff09;&#xff1a; 集合的容器。Collection&#xff08;集合…

ShareSDK iOS端如何实现小红书分享

下载SDK 请登陆官网 &#xff0c;找到SDK下载&#xff0c;勾选需要的平台下载 导入SDK &#xff08;1&#xff09;离线导入将上述下载到的SDK&#xff0c;直接将整个SDK资源文件拖进项目里&#xff0c;如下图&#xff1a; 并且勾选以下3个选项 在点击Finish&#xff0c;…

多载波调制与OFDM原理讲解以及MATLAB实现GUI设计

前言 基于MATLAB设计并实现了一个OFDM调制的图形用户界面&#xff08;GUI&#xff09;系统。该系统旨在简化OFDM调制过程的仿真&#xff0c;提供友好的用户交互界面。设计目标是通过GUI实现参数化的OFDM仿真&#xff0c;包括子载波数、符号数、IFFT长度、循环前缀长度、循环后…

Android 换肤之插件换肤

文章目录 Android 换肤之插件换肤概述效果使用步骤代码结构原理 代码下载 Android 换肤之插件换肤 概述 Android 实现应用内换肤的常用方式&#xff08;两种&#xff09;&#xff1a; 通过Theme切换主题&#xff0c;即静态方法。通过AssetManager切换主题&#xff0c;可实现…

单元测试总结,一文全通

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、何为单测 测试有黑盒测试和白盒测试之分&#xff0c;黑盒测试顾名思义就是我们不了解盒子的…

数据泄露时代的安全之道:访问认证的重要性

引言 想象一下&#xff1a;你一觉醒来&#xff0c;收到一条通知——你的公司遭遇了数据泄露。你感到恐惧&#xff0c;因为这意味着客户数据被曝光&#xff0c;公司声誉受损&#xff0c;还有巨额罚款在等着你。在当今的数字化环境中&#xff0c;这种情况太常见了。全球各地的组…

ansible执行任务时,报错/usr/bin/env node没有文件或目录。

报错如图&#xff1a; 解决&#xff1a;添加软链即可 sudo ln -s /home/app/node-v18.20.3/bin/node /usr/bin/node

Qt开发 | qss简介与应用

文章目录 一、qss简介与应用二、QLineEdit qss介绍与使用三、QPushButton qss1.常用qss1.1 基本样式表1.2 背景图片1.3 图片在左文字在右 2.点击按钮弹出菜单以及右侧箭头样式设置3.鼠标悬浮按钮弹出对话框 四、QCheckBox qss妙用&#xff1a;实时打开关闭状态按钮五、QComboBo…

0-FreeCAD简介

这里写自定义目录标题 FreeCAD简介FreeCAD简介 FreeCAD是一款开源的三维计算机辅助设计(CAD)软件,它主要用于产品设计和工程制图。这款软件可以创建和修改3D模型,支持参数化设计,意味着你可以通过改变模型的参数来调整模型的大小、形状等属性。FreeCAD还支持多种3D文件格式…