解决微信小程序开发中onLanch和onLoad的异步问题
微信小程序开发
小程序开发
浏览：955 次
APP中的Onlanch和主页索引。微信小程序开发过程中的vue vue中的onload异步问题。如何确保在同时触发onload时，先执行onlanch中的所有代码，然后在获得返回值后执行onload中的代码
例如，我想在app启动时获取openid或用户信息令牌。在返回所需数据之前，小程序将执行主页索引。vue中的onload导致后续代码不支持openid。没有openid，无法获取令牌。没有令牌，就无法请求任何数据。因此，用户打开页面时看不到任何内容
写一个deom
app。vue程序启动并异步使用计时器
导出默认值{
onLaunch:函数（）{
安慰日志（'项目已启动'）
setTimeout（（）=>{
安慰日志（“加载1”）
setTimeout（（）=>{
安慰日志（“加载2”）
setTimeout（（）=>{
安慰日志（“加载3”）
},1000)
},1000)
},1000)
}
};
在首页索引In vue onload上
加载（）{
安慰日志（'页面加载..'）
setTimeout（（）=>{
安慰日志（“第1页”）
setTimeout（（）=>{
安慰日志（'第2页'）
setTimeout（（）=>{
安慰日志（'第3页'）
},1000)
},1000)
},1000)
}
打印程序执行结果
snipaste_20200531_212039.png
执行命令
Onlanche同步=>Onload同步=>Onload异步=>Onlanch异步
解决1
定时器延迟onload中的代码，但这在实际开发中是不现实的，因为当用户的网络速度不好时，onlanche请求中的代码超过了定时器的时间范围，onload的代码将被执行，因此它仍然是空白的。当用户的网络速度良好时，代码不会加载得太快，而是在定时器运行后加载。这种限时解决方案不是真正的解决方案
决议2
ES6提供了一个承诺方案，这是一个很好的解决方案
什么是承诺？
1.主要用于异步计算
2.您可以对异步操作进行排队，以所需的顺序执行它们，并返回预期的结果
3.您可以在对象之间传递和操作promise，以帮助我们处理队列
基本用法：
<脚本>
函数runAsync（）{
安慰日志（“准备洗澡”）
return new Promise（函数（resolve，reject）{
//执行一些异步操作
setTimeout（函数（）{
安慰日志（“洗澡完成”）；
解决（“干净”）；
}, 2000);
});
}
//如何使用？
运行异步（）
.则（（res）=>{
控制台日志（res）；
})
取出您最初在APP中编写的onlanch代码。vue并编写新方法
函数login（）{
return new Promise（（resolve，reject）=>{
安慰日志（'项目已启动'）
setTimeout（（）=>{
安慰日志（“加载1”）
setTimeout（（）=>{
安慰日志（“加载2”）
setTimeout（（）=>{
安慰日志（“加载3”）
//全部已成功加载，并且正在卸载onload
解决（）
},1000)
},1000)
},1000)
})
}
//暴露
导出默认登录
在主页上加载
//导入
从“@/utils/token.js”导入登录名
login（）.然后（res=>{
安慰日志（'页面加载..'）
setTimeout（（）=>{
安慰日志（“第1页”）
setTimeout（（）=>{
安慰日志（'第2页'）
setTimeout（（）=>{
安慰日志（'第3页'）
},1000)
},1000)
},1000)
})
执行过程
snipaste_20200531_ 224413.png
决议3
使用侦听器监视onlanche中的所有代码是否已执行
手表：{
//在onlanch中监控vuex中BOL的数据更改执行
“$store.state.bol”（）{
//加载onlanch并修改vuex数据后，执行以下代码
安慰日志（'页面加载..'）
setTimeout（（）=>{
