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

时间:2021-05-18

所述问题:

前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过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: '', //用户openiduserId: '', //用户编号},/*** 用户登录请求封装(解决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://plete接口执行后的回调函数,无论成功失败都会调用})} else {reject("error");}}})})}});

index.js实现:

const app=getApp();//初始化app.jspage({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(){//需要用到用户编号换取商品信息的接口}})

总结:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章