所述問題:
前端時(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ā)者都知道微信請(qǐng)求數(shù)據(jù)都是異步執(zhí)行的,如在同一個(gè)onload寫兩個(gè)請(qǐng)求數(shù)據(jù)的方法,它不一定會(huì)按照先后順序去執(zhí)行,這就是傳說中的異步地獄了。
解決方法:
當(dāng)然,我既然知道這個(gè)執(zhí)行順序是由于微信小程序的異步執(zhí)行請(qǐng)求原因?qū)е碌摹N覀兛梢允褂肞romise 來解決異步編程問題啦。我的解決方法是,首先我是在app.js 中定義了一個(gè)全局方法,用來登錄小程序請(qǐng)求用戶信息的接口,每次進(jìn)入首頁的時(shí)候先判斷我是否已有用戶信息緩存,假如不存在那么請(qǐng)求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)請(qǐng)求},/*** 定義全局變量*/globalData: {openid: '', //用戶openiduserId: '', //用戶編號(hào)},/*** 用戶登錄請(qǐng)求封裝(解決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請(qǐng)求傳遞code憑證換取用戶openid,并獲取后臺(tái)用戶信息wx.request({url: 'https://www.xxxx.xxx.api', // 后臺(tái)請(qǐng)求用戶信息方法【注意,此處必須為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");}}})})}});
新聞熱點(diǎn)
疑難解答
圖片精選