所述問題:
創新互聯公司主要從事成都網站制作、網站設計、網頁設計、企業做網站、公司建網站等業務。立足成都服務吳中,十多年網站建設經驗,價格優惠、服務專業,歡迎來電咨詢建站服務:13518219792
前端時間開發了一個微信小程序商城項目,因為這個項目我們的需求是進入小程序就通過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() { //需要用到用戶編號換取商品信息的接口 } })
總結:
當然解決異步回調的方法有很多種,不過我在這里只說我認為好用的一種,大家有什么想法也可以一起分享學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持創新互聯。
網站名稱:微信小程序之onLaunch與onload異步問題詳解
網站路徑:http://m.newbst.com/article42/ggpeec.html
成都網站建設公司_創新互聯,為您提供定制開發、、網站設計、云服務器、自適應網站、App開發
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯