uniapp接口请求api封装,规范化调用

news/2024/7/4 3:48:24

封装规范和vue中的差不多,都是统一封装成一个request对象,然后在api.js里面调用。

先创建一个utils文件夹,然后里面创建一个request.js,代码如下:

export const baseURL = '基础url地址'

const request = (options) => {
	// 判断是不是完整的地址,不是的话,拼接上baseUrl
	let urlPath = ""
	if (options.url.indexOf("http") === -1) {
		urlPath = baseURL + options.url
	} else {
		urlPath = options.url
	}
	console.log("请求的url是:", urlPath);
	return new Promise((resolve, reject) => {
		uni.request({
			url: baseURL + options.url, //接口地址:前缀+方法中传入的地址
			method: options.method || 'GET', //请求方法:传入的方法或者默认是“GET”
			data: options.data || {}, //传递参数:传入的参数或者默认传递空集合
			header: {
				'token': uni.getStorageSync("token") || "" //自定义请求头信息
			},
			success: (res) => {
				// 成功返回
				console.log("返回数据:", res)
				resolve(res.data.response_data)
			},
			// 这里的接口请求,如果出现问题就输出接口请求失败
			fail: (err) => {
				console.log("请求错误:", err)
				reject(err)
			}
		})
	})
}

export default request

在api文件夹中封装对应的index.js文件,然后导入request对象:

import request from '@/utils/request'

export default {
	getUUID(data) {
		console.log("getUUID");
		return request({
			url: '/user/wxapp',
			method: 'get',
			data,
		})
	},
	changeStatus(data) {
		return request({
			url: '/message/isReads',
			method: 'post',
			data,
		})
	},
	getMsgType(params) {
		return request({
			url: '/message/messageType',
			method: 'get',
			params,
		})
	},
	deleteMsg(data) {
		return request({
			url: '/message/delete',
			method: 'post',
			data,
		})
	},
}

在对应的vue或者react中引入并调用:


http://lihuaxi.xjx100.cn/news/1720041.html

相关文章

软件测试必备:如何编写测试用例?

前言 今天想和大家来聊聊测试用例,这篇文章主要是想要写给软件测试小伙伴们的,因为我发现还是有很多小伙伴在遇到写测试用例的时候无从下手,我就想和大家简单的聊聊,这篇文章主要是针对功能测试的哟。 同时,我也准备…

10步开启SAFe敏捷发布列车

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 敏捷畅想一、培训 SAFe 项目顾问 (SPC)二、培训精益敏捷领导者三、 举办价值流研讨会并确定您的第一个敏捷发布系列四、 定义/设置 ART 和团队五、 担任重要角色六、…

Python开发利器KeymouseGo,开源的就是香

1、介绍 在日常工作中,经常会遇到一些重复性的工作,不管是点击某个按钮、写文字,打印,还是复制粘贴拷贝资料之类的,需要进行大量的重复操作。按键精灵大家想必都听说过,传统的方式,可以下载个按…

iPhone手机屏幕分辨率

ios app测试时,需要测试应用在不同型号的苹果手机上的表现形式,可以自己在浏览器上配置。 代数设备逻辑像素尺寸缩放发布时间第一代iPhone 2G320 x 480480 x 3203.5寸1x2007年6月29日第二代iPhone 3320 x 480480 x 3203.5寸1x2008年7月11日第三代iPhone …

Linux docker 安装 部署

docker 安装 linux系统离线安装docker 如何使用docker部署c/c程序 常用命令 给予 docker 访问 gui 的权限 在 /etc/profile 末尾添加 if [ "$DISPLAY" ! "" ] thenxhost fi在执行 更新 source /etc/profiledocker下载镜像 docker search gcc #搜索d…

appendChild也是异步函数(给dom添加子节点后,第一次修改dom样式不生效)

目录 一、问题 二、原因及解决方法 三、总结 一、问题 1.在已有dom上添加子节点son,并在添加后把son移动到合适的位置。但是发现第一次修改son的样式不生效,打印后竟然发现:获取到的dom高度 clientHeight 第一次竟然是错误的(…

开源镜像站

阿里开源镜像站:阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区网易开源镜像站:欢迎访问网易开源镜像站搜狐开源镜像站:Index of /北京交通大学开源镜像站:http://mirror.bjtu.edu.cn兰州大学开源软件镜像站:兰州大学…

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示 APP H5 谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。 1、申请谷歌key 以下是申请谷歌地图 API 密钥的流程教程: 登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。 1、创建或选择项目:如果你还没有创建项目…