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


Posted in Javascript onMarch 28, 2019

所述问题:

前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过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()
{
//需要用到用户编号换取商品信息的接口

}
})

总结:

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

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

Javascript 相关文章推荐
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
详解vue使用插槽分发内容slot的用法
Mar 28 #Javascript
详解一个基于套接字实现长连接的express
Mar 28 #Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 #Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 #Javascript
深入理解es6块级作用域的使用
Mar 28 #Javascript
详解在网页上通过JS实现文本的语音朗读
Mar 28 #Javascript
详解React服务端渲染从入门到精通
Mar 28 #Javascript
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP详细彻底学习Smarty
2008/03/27 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
jQuery Ajax之$.get()方法和$.post()方法
2009/10/12 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
python决策树之CART分类回归树详解
2017/12/20 Python
Python机器学习之决策树算法
2017/12/22 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
初中生期末考试的自我评价
2013/12/17 职场文书
制药工程专业个人求职自荐信
2014/01/25 职场文书
校长先进事迹材料
2014/02/01 职场文书
区级文明单位申报材料
2014/05/15 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
房产公证书样本
2015/01/23 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL