微信小程序封装HTTP网络请求

冬天我不穿棉袄

于 2021-08-30 09:35:32 发布

阅读量1k

点赞数 1

文章标签： http 小程序微信

本文链接：https://blog.youkuaiyun.com/qq_40825921/article/details/119990079

版权

本文总结了微信小程序中如何封装HTTP网络请求，包括登录请求的封装过程，利用wx.login获取code，结合后台交互获取token并存储。还介绍了如何封装request请求以及统一管理API。在实际使用中，通常在个人资料页面加载时调用登录接口，并通过wx.getUserProfile获取用户授权信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相比于 vue 封装的 htt 请求，微信小程序的请求是基于 wx.request 发送的。下面将对小程序封装 httq 请求进行一个总结

1、封装登录请求

小程序的登录流程是

1、通过 wx.login 获取微信服务器返回的 code

2、将返回的 code,传入后台的登录请求中，也就是本文中的https://api.it120.cc/{domain}/user/wxapp/authorize请求，请求成功之后，便可以获取到后台返回的 token。

3、通过wx.setStorageSync将token存储在本地，然后发送需要带token请求的时候，可以带上token参数


const app = getApp();

function loginByWx() {
	return new Promise((resolve, reject) => {
		// 调用wx.login 获取 code
		wx.login({
			success: (res) => {
				wx.request({
					url: "https://api.it120.cc/{domain}/user/wxapp/authorize",
					data: {
						code: res.code,
					},
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded",
					},
					success: (result) => {
						// 成功之后储存token到本地
						wx.setStorageSync("token", result.data.data.token);
						resolve(res.code);
					},
					fail: (err) => {
						reject(err);
						// 请求失败弹窗统一跳转到请求失败页面
						wx.showToast({
							icon: "none",
							title: "请求失败",
						});
						// wx.