微信小程序之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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
详解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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
1.PHP简介
2006/10/09 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
详解php反序列化
2020/06/10 PHP
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
python中with用法讲解
2020/02/07 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
市场部专员岗位职责
2013/11/30 职场文书
《荷花》教学反思
2014/04/16 职场文书
教师读书活动总结
2014/05/07 职场文书
工业设计专业自荐书
2014/06/05 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
担保书格式
2015/01/20 职场文书
博物馆观后感
2015/06/05 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫