【微信小程序篇】-请求封装

news/2024/7/20 1:41:00 标签: 微信小程序, 小程序

最近自己在尝试使用AIGC写一个小程序，页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制，会经常出现对于需求理解跑偏情况，需要不断的重复强调，并纠正错误，才能得到你想要的内容)。

因为最近某些原因，所处的环境网络没办法科学上网，剩下的网络交互需要自己完成。

请求封装

常用的请求方式：POST、GET
了解了一些网友们封装的方式，使用 Promise 来完成，Let’s do it。

1.动态配置环境：

env.config.js

const envConf = {
    //本地环境
    develop: {
        mode: 'dev',
        DEBUG: false,
        VCONSOLE: true,
        appid: '***',
        VUE_APP_BASE_URL: 'https://***',
    },
    //测试环境
    test: {
        mode: 'test',
        DEBUG: false,
        VCONSOLE: false,
        appid: '***',
        VUE_APP_BASE_URL: 'https://***',
    },
    //开发环境
    prod: {
        mode: 'prod',
        DEBUG: false,
        VCONSOLE: false,
        appid: '***',
        VUE_APP_BASE_URL: 'https://***',
    }
}
module.exports = {
    // 获取 envVersion是true的环境
    env: envConf[__wxConfig.envVersion]
}

2.封装请求

第一部分：基本信息处理

基本的环境信息及用户、租户、信息获取，不需要token的请求地址配置，需要统一处理code的数组配置

const app = getApp();
var tokenKey = "token";
var login_path = '/pages/login/login';
//请求url;引用的是env.config.js中对应环境的
var serverUrl = env.env.VUE_APP_BASE_URL;
var userInfo = wx.getStorageSync('userInfo');
var tenantid = '1'; //租户Id
if (!userInfo === '') {
	tenantid = userInfo.relTenantIds.split(',')[0];
}
import env from '../config/env.config'
// 例外不用token的地址
var exceptionAddrArr = ['/sys/login', ];
// 跳转到登录页的 code
var jumpLoginCodes = [
    1001,
    1002,
    1007,
    1009,
    1010,
]

第二部分：请求头设置

//请求头处理函数
function CreateHeader(url, type) {
	let header = {}
	if (type == 'POST_PARAMS') {
		header = {
			'content-type': 'application/x-www-form-urlencoded',
		}
	} else {
		header = {
			'content-type': 'application/json',
		}
	}
	if (exceptionAddrArr.indexOf(url) == -1) {
		//排除请求的地址不需要token的地址
		let token = wx.getStorageSync(tokenKey);
		// header.Authorization = token;
		//请求头携带token还有租户id
		header['X-Access-Token'] = token;
		header['tenant-id'] = tenantid;
	}
	return header;
}

第三部分：请求封装

POST请求部分

//post请求，数据在body中
function postRequest(url, data) {
	let header = CreateHeader(url, 'POST');
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + url,
			data: {
				...data,
				tenantId: tenantid
			},
			header: header,
			method: 'POST',
			success: (res => {
				if (res.statusCode === 200 && res.data && res.data.code === 200) {
					resolve(res)
				}
				//Token失效  跳转至登录页面
				else if (res.data && jumpLoginCodes.indexOf(res.data.code) > -1) {
					//移除失效token
					wx.removeStorageSync('token')
					//移除失效的用户信息
					wx.removeStorageSync('userInfo')
					//属于tabbar的页面，只能通过wx.switchTab来跳转
					// wx.switchTab({
					// 	url: login_path,
					// }) 
					// 不属于 tabbar 的页面，需要通过 wx.navigateTo 来跳转
                    wx.navigateTo({
                        url: login_path
                    });
					console.log("TOKEN失效");
					wx.showToast({
						icon: "none",
						title: (res.data && res.data.message) || "请求失败",
					});
				} else {
					wx.showToast({
						icon: "none",
						title: (res.data && res.data.message) || "请求失败",
					});
					reject(res)
				}
				setTimeout(_ => {
					wx.hideLoading();
				}, 500)
			}),
			fail: (res => {
				wx.hideLoading();
				console.log("err!!!!", err) wx.showToast({
					icon: "none",
					title: '请求失败',
				});
				reject(err)
			})
		})
	})
}
//post请求，数据按照query方式传给后端
function postParamsRequest(url, data) {
	let header = CreateHeader(url, 'POST_PARAMS');
	let useurl = url;
	console.log(useurl);
	return new Promise((resolve, reject) => {
		wx.request({
			url: serverUrl + useurl,
			header: header,
			method: 'POST',
			success: (res => {
				if (res.statusCode === 200 && res.data && res.data.code === 200) {
					resolve(res)
				}
				//Token失效  跳转至登录页面
				else if (res.data && jumpLoginCodes.indexOf(res.data.code) > -1) {
					//移除失效的用户信息
					wx.removeStorageSync('userInfo')
					//移除失效token
					wx.removeStorageSync('token')
					//属于tabbar的页面，只能通过wx.switchTab来跳转
					// wx.switchTab({
					// 	url: login_path,
					// }) 
					// 不属于 tabbar 的页面，需要通过 wx.navigateTo 来跳转
                    wx.navigateTo({
                        url: login_path
                    });
					wx.showToast({
						icon: "none",
						title: (res.data && res.data.message) || "请求失败",
					});
				} else {
					wx.showToast({
						icon: "none",
						title: (res.data && res.data.message) || "请求失败",
					});
					reject(res)
				}
				setTimeout(_ => {
					wx.hideLoading();
				}, 500)
			}),
			fail: (res => {
				wx.hideLoading();
				console.log("err!!!!", err) wx.showToast({
					icon: "none",
					title: '请求失败',
				});
				reject(err)
			})
		})
	})
}

GET请求部分

//get 请求
function getRequest(url, data) {
	let header = CreateHeader(url, 'GET');
	return new Promise((resolve,
		reject) => {
		wx.request({
			url: serverUrl + url,
			data: data,
			header: header,
			method: 'GET',
			success: (
				res => {
					//统一处理响应状态码
					if (res.statusCode === 200 && res.data && res.data.code === 200) {
						resolve(res)
					}
					//Token失效  跳转至登录页面
					else if (res.data && jumpLoginCodes.indexOf(res.data.code) > -1) {
						//移除失效的用户信息
						wx.removeStorageSync('userInfo')
						//移除失效token
						wx.removeStorageSync('token')
						//属于tabbar的页面，只能通过wx.switchTab来跳转
					    // wx.switchTab({
						// 	url: login_path,
						// }) 
						// 不属于 tabbar 的页面，需要通过 wx.navigateTo 来跳转
                    	wx.navigateTo({
                    	    url: login_path
                    	});
						wx.showToast({
							icon: "none",
							title: (res.data && res.data.message) || "请求失败",
						});
					} else {
						wx.showToast({
							icon: "none",
							title: (res.data && res.data.message) || "请求失败",
						});
						reject(res)
					}
					setTimeout(_ => {
						wx.hideLoading();
					}, 500)
				}),
			fail: (res => {
				wx.hideLoading();
				console.log("err!!!!", err) wx.showToast({
					icon: "none",
					title: '请求失败',
				});
				reject(err)
			})
		})
	})
}

参考部分别人的内容，自己做了一些适合自己的判定改造，搞定。


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

相关文章

【torch.nn : Pooling Layers】

【torch.nn : Pooling Layers】

文章目录 MaxPool2dAvgPool2dAdaptiveAvgPool2dMaxUnpool2d MaxPool2d CLASS torch.nn.MaxPool2d(kernel_size, strideNone, padding0, dilation1, return_indicesFalse, ceil_modeFalse)功能： 在由几个输入平面组成的输入信号上应用2D最大池化。 举个简单的例子&a…
阅读更多...
【代码随想录-Leetcode第四题：150. 逆波兰表达式求值】

【代码随想录-Leetcode第四题：150. 逆波兰表达式求值】

题目 给你一个字符串数组 tokens ，表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意： 有效的算符为 ‘’、‘-’、‘*’ 和 ‘/’ 。每个操作数（运算对象）都可以是一个整数…
阅读更多...
大连交通大学813软件工程考研习题

大连交通大学813软件工程考研习题

1.什么是软件生存周期模型?有哪些主要模型? 生存周期模型：描述软件开发过程中各种活动如何执行的模型。对软件开发提供强有力的支持，为开发过程中的活动提供统一的政策保证，为参与开发的人员提供帮助和指导，是软件生存周期模型…
阅读更多...
行业追踪，2023-08-10

行业追踪，2023-08-10

自动复盘 2023-08-10 凡所有相，皆是虚妄。若见诸相非相，即见如来。 k 线图是最好的老师，每天持续发布板块的rps排名，追踪板块，板块来开仓，板块去清仓，丢弃自以为是的想法，板块去留让…
阅读更多...
ElementUI动态添加表单项

ElementUI动态添加表单项

昨天感冒发烧了&#xff0c;脑子不好使。在实现这个动态表单项时一直报错脑瓜子嗡嗡的&#xff01; 不过好在昨天休息好了&#xff0c;今天起来趁脑瓜子好使&#xff0c;一会就弄好了。 这里记录一下 <el-form-itemv-for"(classId,index) in addFom.classIds":lab…
阅读更多...
STM32 F103C8T6学习笔记3：串口配置—串口收发—自定义Printf函数

STM32 F103C8T6学习笔记3：串口配置—串口收发—自定义Printf函数

今日学习使用STM32 C8T6的串口&#xff0c;我们在经过学习笔记2的总结归纳可知&#xff0c;STM32 C8T6最小系统板上有三路串口&#xff0c;如下图&#xff1a; 今日我们就着手学习如何配置开通这些串口进行收发&#xff0c;这里不讲串口通信概念与基础&#xff0c;可以自行网上…
阅读更多...
数字经济时代，如何加强应用数据保护？

数字经济时代，如何加强应用数据保护？

在数字经济时代&#xff0c;加强应用数据保护对于个人和组织来说至关重要。以下是一些加强应用数据保护的建议&#xff1a; 合规法律法规&#xff1a;了解并遵守适用于您所在地区或行业的数据保护法律法规。这包括个人隐私保护法、数据安全法等。 安全意识培训&#xff1a;为组…
阅读更多...
【广州华锐视点】AR电力职业技能培训系统让技能学习更“智慧”

【广州华锐视点】AR电力职业技能培训系统让技能学习更“智慧”

随着科技的发展&#xff0c;教育方式也在不断地进步和创新。其中&#xff0c;增强现实(AR)技术的出现&#xff0c;为教育领域带来了全新的可能。AR电力职业技能培训系统就是这种创新教学方法的完美实践&#xff0c;它将虚拟与现实相结合&#xff0c;为学生提供了一个沉浸式的学…
阅读更多...
最新文章

Copyright @ 2022~2023