18910140161

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

顺晟科技

2021-06-16 10:49:16

602

提到的问题:

在前端,我们开发了一个微信小程序商城项目,因为在这个项目中,我们需要通过api wx.login({})登录用户,在系统后台获取用户的基本信息。在此之前,我一直认为微信小程序中App.js中的onload方法应该比其他页面中的onload方法先执行。那么问题来了。每次进入小程序的首页,有时候会先执行onload方法,有时候会先执行首页的onload方法。最后确认这两种方法在微信小程序中不是按顺序执行的,因为是异步执行的。当然,开发过微信小程序的开发者都知道,微信请求数据是异步执行的。例如,在同一个onload中写入两个请求数据的方法可能不会按顺序执行,这就是传说中的异步地狱。

解决方法:

当然,既然知道这个执行顺序是微信小程序异步执行请求导致的。我们可以用Promise来解决异步编程问题。我的解决方案是,首先我在app.js中定义了一个全局方法,用来登录小程序请求用户信息的界面。每次进入首页,首先判断是否有用户信息缓存,如果没有,就请求app.js中的全局方法获取数据。这里就不详细介绍Promise的基本用法了,因为阮一峰已经说得很详细了,大家可以点击查看【es6.ruanyifeng.com/#docs/promi…

方法实现:

App.js方法的实现:

App({

onLaunch:函数(){

控制台日志(“应用程序启动”)

//默认请求不在这里

},

/**

*定义全局变量

*/

globalData: {

Openid: ' ',//用户Openid

UserId: ' ',//用户号

},

/**

*用户登录请求封装(解决onlaunch和onload执行顺序问题)

*/

userLogin:函数(){

that=this

//定义承诺方法

返回新承诺(功能(解决,拒绝){

//调用登录界面

wx.login({

成功:功能(res) {

if (res.code) {

Console.log('用户登录授权码为:' RES . code ');

//调用wx.request请求传递代码证书以换取用户openid,并获取后台用户信息

wx.request({

Url :' https://www.xxxx.xxx.api ',//后台请求用户信息的方法[注意,这必须是https数字加密证书]

数据: {

Code: res.code //code证书

},

header: {

“内容类型”:“应用程序/JSON”//的默认值

},

成功(res) {

console.log(res.data)

if (res.data.errcode==0) {

//成功获取用户信息

that . global data . open id=RES . data . open id;

that . global data . UserId=RES . data . UserId;

//保存在会话缓存中

wx.setStorageSync('userId ',that.globalData.userId)

console . log(ThAT . GlobalData . UserID);

console . log(that . GlobalDATa . open id);

//承诺机制将成功的数据放回

resolve(RES . data);

} else {

拒绝('错误');

}

},

fail:功能(res) {

拒绝(RES);

wx.showToast({

标题:“系统错误”

})

},

complete: ()={

}//无论成功还是失败,都会调用完整接口执行后的回调函数

})

}

其他

{

拒绝('错误');

}

}

})

})

}

});

复制代码索引. js的实现

const app=GetApp();//初始化app.js

页面({

onLoad:函数(选项){

that=this

让UserId=wx . GetStorageync(' UserId ');

Console.log('进入首页的用户编号为:' UserId ');

if (UserId=='') {

app.userLogin()。然后(res={

console . log(' promise回调后的数据:');

console . log(RES);

if (res.errcode==0) {

//将首页需要请求的所有数据接口提取到自定义方法中

那个。GetData();

}

})

}

其他

{

//用户缓存存在

那个。GetData();

}

}

,

GetData()

{

//商品信息需要交换用户号

}

})

复制代码摘要:

当然解决异步回调的方法有很多,但我在这里只说一个我觉得比较好用的,大家可以分享一下,学习一下自己的想法。

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航