微信小程序之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 相关文章推荐
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
js实现数组转换成json
Jun 26 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
详解tween.js的使用教程
Sep 14 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
详解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
php在window iis的莫名问题的测试方法
2013/05/14 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PDO::beginTransaction讲解
2019/01/27 PHP
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
住宅质量保证书
2014/04/29 职场文书
我爱我校演讲稿
2014/05/21 职场文书
暑期培训班招生方案
2014/08/26 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers