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

更新時(shí)間：2019年03月28日 14:33:07 作者：追逐時(shí)光

這篇文章主要介紹了微信小程序之onLaunch與onload異步問題詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

所述問題：

前端時(shí)間開發(fā)了一個(gè)微信小程序商城項(xiàng)目，因?yàn)檫@個(gè)項(xiàng)目我們的需求是進(jìn)入小程序就通過wx.login({}) 這個(gè)api進(jìn)行用戶登錄，獲取系統(tǒng)后臺(tái)的用戶基本信息。再此之前，一直以為微信小程序中的App.js 中onLaunch （小程序初始化完成執(zhí)行該方法）方法比其他頁面的的 onload 方法要先執(zhí)行。那么問題就來了，我每次進(jìn)入小程序首頁的時(shí)候有時(shí)候會(huì)先執(zhí)行onlaunch方法，有時(shí)又會(huì)先執(zhí)行首頁的onload的方法，最后經(jīng)過確定，在微信小程序中這兩個(gè)方法并沒有執(zhí)行先后的順序，因?yàn)樗麄兌际钱惒綀?zhí)行的。當(dāng)然開發(fā)過微信小程序的開發(fā)者都知道微信請求數(shù)據(jù)都是異步執(zhí)行的，如在同一個(gè)onload寫兩個(gè)請求數(shù)據(jù)的方法，它不一定會(huì)按照先后順序去執(zhí)行，這就是傳說中的異步地獄了。

解決方法：

當(dāng)然，我既然知道這個(gè)執(zhí)行順序是由于微信小程序的異步執(zhí)行請求原因?qū)е碌摹Ｎ覀兛梢允褂肞romise 來解決異步編程問題啦。我的解決方法是，首先我是在app.js 中定義了一個(gè)全局方法，用來登錄小程序請求用戶信息的接口，每次進(jìn)入首頁的時(shí)候先判斷我是否已有用戶信息緩存，假如不存在那么請求app.js中的全局方法進(jìn)行數(shù)據(jù)獲取。在這里我就不詳細(xì)介紹Promise 的基本用法了，因?yàn)槿钜环逡呀?jīng)將的非常詳細(xì)了，大家可以點(diǎn)擊查看【 http://es6.ruanyifeng.com/#docs/promise#Promise-all 】。

方法實(shí)現(xiàn)：

App.js方法實(shí)現(xiàn)：

App({
onLaunch: function() {
console.log('App Launch')
//不在這里默認(rèn)請求
},
/**
* 定義全局變量
*/
globalData: {
openid: '', //用戶openid
userId: '', //用戶編號(hào)
},
/**
* 用戶登錄請求封裝(解決onlaunch和onload執(zhí)行順序問題)
*/
userLogin: function() {
var that = this;
//定義promise方法
return new Promise(function(resolve, reject) {
// 調(diào)用登錄接口
wx.login({
success: function(res) {
if (res.code) {
console.log("用戶登錄授權(quán)code為：" + res.code);
//調(diào)用wx.request請求傳遞code憑證換取用戶openid，并獲取后臺(tái)用戶信息
wx.request({
url: 'https://www.xxxx.xxx.api', // 后臺(tái)請求用戶信息方法【注意，此處必須為https數(shù)字加密證書】
data: {
code: res.code //code憑證
},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
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機(jī)制放回成功數(shù)據(jù)
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '系統(tǒng)錯(cuò)誤'
})
 },
complete: () => {

} //complete接口執(zhí)行后的回調(diào)函數(shù)，無論成功失敗都會(huì)調(diào)用
})
} 
else 
{
reject("error");
}
}
})
})
}
});

index.js實(shí)現(xiàn)：

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

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

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

}
})

總結(jié)：

當(dāng)然解決異步回調(diào)的方法有很多種，不過我在這里只說我認(rèn)為好用的一種，大家有什么想法也可以一起分享學(xué)習(xí)。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: