微信小程序之onLaunch与onload异步问题

简介: 微信小程序之onLaunch与onload异步问题

所述问题:

   前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息。再此之前,一直以为微信小程序中的App.js 中onLaunch (小程序初始化完成执行该方法)方法比其他页面的的 onload 方法要先执行。那么问题就来了,我每次进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过确定,在微信小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的,如在同一个onload写两个请求数据的方法,它不一定会按照先后顺序去执行,这就是传说中的异步地狱了。


解决方法:

  当然,我既然知道这个执行顺序是由于微信小程序的异步执行请求原因导致的。我们可以使用Promise 来解决异步编程问题啦。我的解决方法是,首先我是在app.js 中定义了一个全局方法,用来登录小程序请求用户信息的接口,每次进入首页的时候先判断我是否已有用户信息缓存,假如不存在那么请求app.js中的全局方法进行数据获取。在这里我就不详细介绍Promise 的基本用法了,因为阮一峰已经将的非常详细了,大家可以点击查看【http://es6.ruanyifeng.com/#docs/promise#Promise-all】。


方法实现:

App.js方法实现:

App({
onLaunch: function() {
console.log('App Launch')
//不在这里默认请求
},
/**
* 定义全局变量
*/
globalData: {
openid: '', //用户openid
userId: '', //用户编号
},
/**
* 用户登录请求封装(解决onlaunch和onload执行顺序问题)
*/
userLogin: function() {
var that = this;
//定义promise方法
return new Promise(function(resolve, reject) {
// 调用登录接口
wx.login({
success: function(res) {
if (res.code) {
console.log("用户登录授权code为:" + res.code);
//调用wx.request请求传递code凭证换取用户openid,并获取后台用户信息
wx.request({
url: 'https://www.xxxx.xxx.api', // 后台请求用户信息方法【注意,此处必须为https数字加密证书】
data: {
code: res.code //code凭证
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
if (res.data.errcode == 0) {
//获取用户信息成功
that.globalData.openid = res.data.openid;
that.globalData.userId = res.data.UserId;
//存入session缓存中
wx.setStorageSync("userId", that.globalData.userId)
console.log(that.globalData.userId);
console.log(that.globalData.openid);
//promise机制放回成功数据
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '系统错误'
})
 },
complete: () => {
} //complete接口执行后的回调函数,无论成功失败都会调用
})
} 
else 
{
reject("error");
}
}
})
})
}
});

index.js实现:

const app=getApp();//初始化app.js
page({
onLoad: function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("进入首页的用户编号为:" + UserId);
if (UserId == '') {
app.userLogin().then(res => {
console.log("promise回调后的数据:");
console.log(res);
if (res.errcode == 0) {
//把首页需要请求的数据接口都提取到一个自定义方法中
that.GetData();
}
})
}
else
{
//用户缓存存在
that.GetData();
}
}
,
GetData()
{
//需要用到用户编号换取商品信息的接口
}
})

总结:

 当然解决异步回调的方法有很多种,不过我在这里只说我认为好用的一种,大家有什么想法也可以一起分享学习。

相关文章
|
5月前
|
前端开发 小程序 API
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
87 0
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
172 0
|
7月前
|
小程序 算法 UED
【专栏】小程序图片合成就绪渲染的转变,从异步并发渲染到同步阻塞渲染
【4月更文挑战第29天】本文探讨了小程序图片合成就绪渲染的转变,从异步并发渲染(提高效率,并发处理但可能导致资源竞争和顺序难控)到同步阻塞渲染(顺序可控,资源管理更精细,可能引起界面卡顿)。同步阻塞通过任务队列和阻塞机制确保顺序,解决并发问题。注意避免长时间阻塞,及时释放资源,优化任务效率,并结合异步处理。选择合适方案取决于实际需求,以平衡效率与一致性。
99 1
|
7月前
|
小程序 前端开发 JavaScript
微信小程序——解决异步问题
微信小程序——解决异步问题
355 0
|
小程序 前端开发 JavaScript
小程序request请求回调函数异步的解决办法
小程序request请求回调函数异步的解决办法
244 0
|
小程序 安全 数据库
小程序里使用async和await变异步为同步,解决回调地狱问题
小程序里使用async和await变异步为同步,解决回调地狱问题
185 0
|
前端开发 小程序 Java
小程序不同页面的异步回调,callback和promise的使用讲解
小程序不同页面的异步回调,callback和promise的使用讲解
206 0
|
前端开发 小程序 UED
小程序图片合成:异步并发渲染→同步阻塞渲染
小程序图片合成:异步并发渲染→同步阻塞渲染
小程序图片合成:异步并发渲染→同步阻塞渲染
|
小程序
小程序 onLaunch 参数差别
小程序 onLaunch 参数差别
545 0
小程序 onLaunch 参数差别
|
29天前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
32 0
在线课堂+工具组件小程序uniapp移动端源码