Directory navigation:

The problem: solution: method implementation: app.js method implementation: index.js implementation:

Conclusion:

Text:

The problem described:

Front-end time developed a wechat small program mall project, because our requirement of this project is to enter the small program through the Wx.login ({}) API for user login, access to the system background user basic information. Before this, I always thought that the onLaunch (execute this method after initialization) method in app.js of wechat mini program should be executed first than the onload method of other pages. Then the problem comes. When I enter the home page of the mini program, sometimes I will execute the onlaunch method first, and sometimes I will execute the onload method of the home page first. Finally, it is confirmed that there is no order of execution of these two methods in the wechat mini program, because they are asynchronously executed. Of course, developers who have developed wechat small programs know that wechat request data is asynchronously executed, such as writing two request data methods in the same onload, it will not necessarily be executed in order, which is the legendary asynchronous hell.

Solutions:

Of course, since I know that this execution order is caused by the asynchronous execution request of wechat applet. We can use Promise to solve the asynchronous programming problem. My solution is: first, I define a global method in app.js, which is used to log in the interface of small program requesting user information. Every time I enter the home page, I first judge whether I have user information cache. If not, I request the global method in app.js for data acquisition. Here I will not introduce the basic use of Promise in detail, because Ruan Yifeng has been very detailed, you can click to view [es6.ruanyifeng.com/#docs/promi…

Method implementation:

App.js method implementation:

App({
onLaunch: function() {
console.log('App Launch'}, /** * define global variables */ globalData: {openID:' '// user openid userId:' ', // userid}, /** * userLogin request package (solve onlaunch and onload execution order problem) */ userLogin:function() { var that = this; // Define the Promise methodreturn new Promise(function(resolve, reject) {// call wx.login({success:function(res) {
if (res.code) {
console.log("User login authorization code is:+ res.code); Wx. request({url: wx) {wx.request({url: wx) {wx.request({url: wx) {wx.request({url: wx)}'https://www.xxxx.xxx.api'Data: {code: res.code //code certificate}, header: {'content-type': 'application/json'// Default}, success(res) {console.log(res.data)ifOpenid = res.data.openid; (res.data.errcode == 0) {// User information is obtained successfully that.globalData.openid = res.data.openid; that.globalData.userId = res.data.UserId; Wx.setstoragesync ("userId", that.globalData.userId) console.log(that.globalData.userId); console.log(that.globalData.openid); Resolve (res.data); }else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: 'System error'})}, complete: () => {} //complete callback function, regardless of success or failure})}else 
{
reject("error"); }}})})}});Copy the code

Index. Js

const app=getApp(); // Initialize app.js page({onLoad:function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("The user number to enter the home page is:" + UserId);
if (UserId == ' ') {
app.userLogin().then(res => {
console.log("Promise callback data:");
console.log(res);
if(res.errCode == 0) {// Extract all data interfaces that need to be requested from the home page into a custom method that.getData (); }})}else{// The user cache exists that.getData (); }},GetData() {// need to use the user id to exchange commodity information interface}})Copy the code

Conclusion:

Of course, there are many ways to solve the asynchronous callback, but I will only mention one that I think works, and you can share your ideas. Original address Reference address