uniapp封装统一请求(get和post)

news/2024/7/10 2:10:50 标签: uni-app, vue.js, javascript, 前端, vue

 uniapp封装请求

request.js文件

javascript">import Vue from 'vue'
// 全局配置
import settings from './settings.js'
function computedBaseUrl(url) {
	// console.log(url);
	return (url.indexOf('http') === -1 ? settings.baseUrl : '') + url
}

// 发送请求
export default (options) => {
	const {
		url = '',
		method = 'GET',
		data = {},
		header = {}
	} = options
	return new Promise((resolve, reject) => {
			try {
				if (options.headers.isToken == true) {
					uni.request({
						url: computedBaseUrl(url),
						method,
						data,
						header: {
							// "Content-Type": "multipart/form-data",
							// "Token": uni.getStorageSync('token'),
							"Authorization": uni.getStorageSync('token'),
							// "Authorization" : 'Bearer ' + JSON.parse(uni.getStorageSync('token')), // 让每个请求携带自定义token 请根据实际情况自行修改
							...header
						},
						
						success(e) {
							// console.log(e.data,'success');
							if (e.data.code == 401) {
								uni.reLaunch({url: '/pages/login/login',});
							}
							resolve(e.data)
						},
						fail(e) {
							// console.log(e,'fail');
							if (e && e.data && e.data.code == 401) {
								uni.reLaunch({url: '/pages/login/login',});
							}
							reject({...e,msg:e.errMsg||e.msg||'未知错误'})
						}
					})
				}else{
					uni.request({
						url: computedBaseUrl(url),
						method,
						data,
						header: {
							// "Content-Type": "multipart/form-data",
							// "Token": uni.getStorageSync('token'),
							// "Authorization": uni.getStorageSync('token'),
							// "Authorization" : 'Bearer ' + JSON.parse(uni.getStorageSync('token')), // 让每个请求携带自定义token 请根据实际情况自行修改
							...header
						},
						success(e) {
							if (e.data.code == 401) {
								uni.reLaunch({url: '/pages/login/index',});
							}
							resolve(e.data)
						},
						fail(e) {
							if (e.data.code == 401) {
								uni.reLaunch({url: '/pages/login/index',});
							}
							reject({...e,msg:e.errMsg||e.msg||'未知错误'})
						}
					})
				}
				
			} catch (err) {
				reject({...err,msg:err.errMsg||err.msg||'未知错误'})
			}
		}).then(data => data)
		.catch(err => [err, null])
}

settings.js文件

javascript">export default {
	baseUrl:'http://127.0.0.1',
	uploadUrl:''
}

注意事项

setting中设置地址,方便进行统一管理,

settinngs.js和request.js文件是同级,放在一个文件夹中即可

使用方式

创建一个api文件夹

javascript">import request from "@/utils/request.js"

// 接口模板
export function getLogin(data = {}) {
	return request({
		url: '/api/wx/wxLogin',
		method: 'post',
		data,
		headers: {
			isToken: false
		},
	})
}

注意小技巧

上面的headers中的isToken,方便对接口进行管理,因为微信小程序强制登录是不能通过审核的,所以有时候要后端放开接口,不需要token,也可哟访问,提高审核的通过率,这边就很方便管理!

结束语

欢迎指教


http://www.niftyadmin.cn/n/5410956.html

相关文章

华为CSS堆叠技术介绍与实现

厦门微思网络​​​​​​https://www.xmws.cn 华为认证\华为HCIA-Datacom\华为HCIP-Datacom\华为HCIE-Datacom Linux\RHCE\RHCE 9.0\RHCA\ Oracle OCP\CKA\K8S\ CISP\CISSP\PMP\ ​ 什么是CSS? CSS交换机系统CSS(Cluster Switch System)&am…

MySQL 8.0 架构 之 DDL日志(元数据日志)(DDL log)

文章目录 MySQL 8.0 架构 之 DDL日志(元数据日志)(DDL log)MySQLDDL日志(元数据日志)(DDL log)参考 【声明】文章仅供学习交流,观点代表个人,与任何公司无关。…

记事本怎么导入Excel文件 记事本数据导入Excel方法

在日常生活中,记事本软件已经成为了我不可或缺的助手,帮助我记录着点点滴滴,释放了大脑的负担。然而,随着时间的推移,记事本里的内容越来越多,如何高效地整理这些数据成为了一个新的问题。特别是当我需要将…

ES单节点部署

ES 拉取镜像 docker pull elasticsearch:7.10.1启动容器 docker run -d -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e "ES_JAVA_OPTS-Xms1g -Xmx1g" -v /es_data:/usr/share/elasticsearch/data --name es 558380375f1a注&#xff1a…

记一次 .NET某设备监控自动化系统 CPU爆高分析

一:背景 1. 讲故事 先说一下题外话,一个监控别人系统运行状态的程序,结果自己出问题了,有时候想一想还是挺讽刺的,哈哈,开个玩笑,我们回到正题,前些天有位朋友找到我,说…

selenium鼠标操作实战

鼠标操作实战 鼠标单击操作 click()内置鼠标操作包ActionChains鼠标双击操作double_click()鼠标右击操作context_click()鼠标指针悬浮操作move_to_element(ele)鼠标拖动操作drag_and_drop(source, target)其他鼠标操作汇总 鼠标单击操作 click() from selenium import webdriv…

AI图像识别安全监测解决方案-解放人力,高效智能---豌豆云

随着人工智能技术的不断发展,AI图像识别技术得到了广泛的应用,尤其是在安全监测领域。 AI图像识别技术主要通过机器学习算法,训练模型对图像和视频进行分析判断,实现对各类物体、场景、人员行为的准确智能识别。 AI图像识别技术…

JavaWeb环境配置 IDE2022版

一、新建一个javaweb文件 文件名可以自己随意改 二、给建立的项目添加框架支持 勾选Web Application,点击确定 建立成功界面,会生成一个新的web文件夹 三、配置tomcat 1、两种打开配置文件方式: 第一种 第二种 2、打开后,点击号&#xf…