揭秘微信小程序异步加载的坑与解决方案

人亦已歌

揭秘微信小程序异步加载的坑与解决方案

【春哥技术博客小程序开发问题分享】前端时间春哥团队技术大东接了一个客户的微信小程序商城项目，因为这个项目需求是进入小程序就通过wx.login({}) 这个api进行用户登录，获取系统后台的用户基本信息。

在此之前，一直以为微信小程序中的App.js 中onLaunch （小程序初始化完成执行该方法）方法比其他页面的的 onload 方法要先执行。那么问题就来了，每次进入小程序首页的时候有时候会先执行onlaunch方法，有时又会先执行首页的onload的方法，最后经过确定，在微信小程序中这两个方法并没有执行先后的顺序，因为他们都是异步执行的。当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的，如在同一个onload写两个请求数据的方法，它不一定会按照先后顺序去执行。

解决方法：

当然，这个执行顺序是由于微信小程序的异步执行请求原因导致的。我们可以使用Promise 来解决异步编程问题啦。解决方法是，首先，在app.js 中定义了一个全局方法，用来登录小程序请求用户信息的接口，每次进入首页的时候先判断我是否已有用户信息缓存，假如不存在那么请求app.js中的全局方法进行数据获取。

方法实现：

App.js方法实现：

1. App({
2. onLaunch: function() {
3. console.log('App Launch')
4. //不在这里默认请求
5. },
6. /
7. * 定义全局变量
8. */
9. globalData: {
10. openid: '', //用户openid
11. userId: '', //用户编号
12. },
13. /
14. * 用户登录请求封装(解决onlaunch和onload执行顺序问题)
15. */
16. userLogin: function() {
17. var that = this;
18. //定义promise方法
19. return new Promise(function(resolve, reject) {
20. // 调用登录接口
21. wx.login({
22. success: function(res) {
23. if (res.code) {
24. console.log("用户登录授权code为：" + res.code);
25. //调用wx.request请求传递code凭证换取用户openid，并获取后台用户信息
26. wx.request({
27. url: 'https://www.xxxx.xxx.api', // 后台请求用户信息方法【注意，此处必须为https数字加密证书】
28. data: {
29. code: res.code //code凭证
30. },
31. header: {
32. 'content-type': 'application/json' // 默认值
33. },
34. success(res) {
35. console.log(res.data)
36. if (res.data.errcode == 0) {
37. //获取用户信息成功
38. that.globalData.openid = res.data.openid;
39. that.globalData.userId = res.data.UserId;
40. //存入session缓存中
41. wx.setStorageSync("userId", that.globalData.userId)
42. console.log(that.globalData.userId);
43. console.log(that.globalData.openid);
44. //promise机制放回成功数据
45. resolve(res.data);
46. } else {
47. reject('error');
48. }
49. },
50. fail: function(res) {
51. reject(res);
52. wx.showToast({
53. title: '系统错误'
54. })
55. },
56. complete: () => {
57. } //complete接口执行后的回调函数，无论成功失败都会调用
58. })
59. }
60. else
61. {
62. reject("error");
63. }
64. }
65. })
66. })
67. }
68. });

复制代码

index.js实现

1. const app=getApp();//初始化app.js
2. page({
3. onLoad: function (option) {
4. var that = this;
5. let UserId = wx.getStorageSync("userId");
6. console.log("进入首页的用户编号为：" + UserId);
7. if (UserId == '') {
8. app.userLogin().then(res => {
9. console.log("promise回调后的数据：");
10. console.log(res);
11. if (res.errcode == 0) {
12. //把首页需要请求的数据接口都提取到一个自定义方法中
13. that.GetData();
14. }
15. })
16. }
17. else
18. {
19. //用户缓存存在
20. that.GetData();
21. }
22. }
23. ,
24. GetData()
25. {
26. //需要用到用户编号换取商品信息的接口
27. }
28. })

复制代码

总结：

当然解决异步回调的方法有很多种，不过在这里暂时分享下好用的一种，大家有什么想法也可以一起分享学习。