The onLaunch in App is triggered when the widget is initialized, and onLoad or onShow in Page is executed later, but the onLoad or onShow event in Page is executed when the user logs in onLaunch and the onLoad or onShow event in Page is executed while waiting for the return value.
Original code segment
app.js code slice.
globalData = { userInfo: null, token:'' } onLaunch() { this.$interceptors = { request: { config(p) { p.url = 'http://test.xxx.com/api' + p.url if(this.globalData.token && this.globalData.token != ''){ p.header = { token: this.globalData.token }; } return p; }, success(rst) { return rst; } } }; this.login(); } login() { const self = this; wx.login({ success(data) { wepy.request({ url: '/user/login?code='+data.code, success: function(res) { wx.setStorageSync('userInfo', res.data.obj); self.globalData.token=res.data.obj.token ; } }); }
index.js snippet
onShow(){ let self = this wx.request({ url: '/message/get-count', success: function(res) { if (res.data.obj.count != 0) { self.msgimg = '../img/msg.png'; self.msgshow = 'block'; self.msgnum = res.data.obj.count; } else { self.msgimg = '../img/nomsg.png'; self.msgshow = 'none'; } self.$apply(); } }); }
Solution
The method adopted here is to define a callback function on the page page, and then to execute the callback function after onLaunch's request. It is important to note that the page page page determines whether the current globalData.token is worth it and then requests the business interface.
The App page has a page page-defined callback method when it judges the success of the request, and if so, it executes the method. Because the callback function is defined in the Page, the method scope this refers to the Page page.
The index.js code slice of callback function is defined.
onShowCall(){ let self = this wx.request({ url: '/message/get-count', success: function(res) { if (res.data.obj.count != 0) { self.msgimg = '../img/msg.png'; self.msgshow = 'block'; self.msgnum = res.data.obj.count; } else { self.msgimg = '../img/nomsg.png'; self.msgshow = 'none'; } self.$apply(); } }); } onShow(){ var token = this.$parent.globalData.token console.log("token:"+token); if( token == ''){ getApp().loginCallback = res => { this.onShowCall() }; }else{ this.onShowCall() } }
app.js snippet with callback function
globalData = { userInfo: null, token:'' } onLaunch() { this.$interceptors = { request: { config(p) { p.url = 'http://test.xxx.com/api' + p.url if(this.globalData.token && this.globalData.token != ''){ p.header = { token: this.globalData.token }; } return p; }, success(rst) { return rst; } } }; this.login(); } login() { const self = this; wx.login({ success(data) { wepy.request({ url: '/user/login?code='+data.code, success: function(res) { wx.setStorageSync('userInfo', res.data.obj); self.globalData.token=res.data.obj.token ; //Callback functions are called here if (getApp().loginCallback) { getApp().loginCallback(res.data.obj.token); } } }); }
In this way, we can achieve the desired results. The order of execution is:
[App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback