微信小程序之onLaunch與onload異步問題

所述問題：

　　 前端時間開發了一個微信小程序商城項目，由於這個項目咱們的需求是進入小程序就經過wx.login({}) 這個api進行用戶登陸，獲取系統後臺的用戶基本信息。再此以前，一直覺得微信小程序中的App.js 中onLaunch （小程序初始化完成執行該方法）方法比其餘頁面的的 onload 方法要先執行。那麼問題就來了，我每次進入小程序首頁的時候有時候會先執行onlaunch方法，有時又會先執行首頁的onload的方法，最後通過肯定，在微信小程序中這兩個方法並無執行前後的順序，由於他們都是異步執行的。固然開發過微信小程序的開發者都知道微信請求數據都是異步執行的，如在同一個onload寫兩個請求數據的方法，它不必定會按照前後順序去執行，這就是傳說中的異步地獄了。

解決方法：

　　固然，我既然知道這個執行順序是因爲微信小程序的異步執行請求緣由致使的。咱們可使用Promise 來解決異步編程問題啦。個人解決方法是，首先我是在app.js 中定義了一個全局方法，用來登陸小程序請求用戶信息的接口，每次進入首頁的時候先判斷我是否已有用戶信息緩存，假如不存在那麼請求app.js中的全局方法進行數據獲取。在這裏我就不詳細介紹Promise 的基本用法了，由於阮一峯已經將的很是詳細了，你們能夠點擊查看【http://es6.ruanyifeng.com/#docs/promise#Promise-all】。

方法實現：

App.js方法實現：

App({
onLaunch: function() {
console.log('App Launch')
//不在這裏默認請求
},
/**
* 定義全局變量
*/
globalData: {
openid: '', //用戶openid
userId: '', //用戶編號
},
/**
* 用戶登陸請求封裝(解決onlaunch和onload執行順序問題)
*/
userLogin: function() {
var that = this;
//定義promise方法
return new Promise(function(resolve, reject) {
// 調用登陸接口
wx.login({
success: function(res) {
if (res.code) {
console.log("用戶登陸受權code爲：" + res.code);
//調用wx.request請求傳遞code憑證換取用戶openid，並獲取後臺用戶信息
wx.request({
url: 'https://www.xxxx.xxx.api', // 後臺請求用戶信息方法【注意，此處必須爲https數字加密證書】
data: {
code: res.code //code憑證
},
header: {
'content-type': 'application/json' // 默認值
},
success(res) {
console.log(res.data)
if (res.data.errcode == 0) {
//獲取用戶信息成功
that.globalData.openid = res.data.openid;
that.globalData.userId = res.data.UserId;
//存入session緩存中
wx.setStorageSync("userId", that.globalData.userId)
console.log(that.globalData.userId);
console.log(that.globalData.openid);
//promise機制放回成功數據
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '系統錯誤'
})
 },
complete: () => {

} //complete接口執行後的回調函數，不管成功失敗都會調用
})
} 
else 
{
reject("error");
}
}
})
})
}
});

index.js實現：

const app=getApp();//初始化app.js
page({

onLoad: function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("進入首頁的用戶編號爲：" + UserId);
if (UserId == '') {
app.userLogin().then(res => {
console.log("promise回調後的數據：");
console.log(res);
if (res.errcode == 0) {
//把首頁須要請求的數據接口都提取到一個自定義方法中
that.GetData();
}
})
}
else
{
//用戶緩存存在
that.GetData();
}

}
,
GetData()
{
//須要用到用戶編號換取商品信息的接口

}
})

總結：

　　固然解決異步回調的方法有不少種，不過我在這裏只說我認爲好用的一種，你們有什麼想法也能夠一塊兒分享學習。