微信小程式非同步請求解決方法
阿新 • • 發佈:2019-02-15
小程式一般需要用token,去識別使用者身份,每次獲取到token之後,再進行下一步操作。再獲取到token之後,將token同步快取,
app.js:
login: function () { var that = this; return new Promise(function (resolve, reject) { if (wx.getStorageSync('token')) { resolve(wx.getStorageSync('token')) } else { wx.login({ success: function (res) { if (res.code) { wx.request({ url: that.baseUrl + 'tt/wx/' + res.code, header: { 'content-type': 'application/json', 'cld.stats.page_entry': that.globalData.scene, 'version': that.globalData.version }, method: 'GET', success: function (e) { if (e.statusCode == 200) { that.globalData.token = e.data.token; wx.setStorageSync('token', e.data.token); resolve(e.data.token) } }, fail: () => { } }) } else { console.log('登入失敗!' + res.errMsg) } } }); } }) },
在呼叫login方法的時候先判斷本地有沒有快取的token,如果有直接返回,沒有的話再從後臺通過介面獲取,獲取之後token之後同步快取。
在首頁index.js,頁面onload的時候需要載入新聞列表,因為小程式所有請求都是非同步載入,直接從快取取token,有可能取不到,這樣可以再index.js裡面這樣寫,具體的封裝請求方法,在我的另一篇部落格裡面有方法,這裡不多做敘述。
app.login().then(() => { api.request(api.Url.newsList, 'POST', { type: 1, page:1 }).then(res => { console.log('success:', res) }).catch(res => { console.log("fail:", res) }).finallly(()=>{ console.log("finallly:", 結束) }) });
這樣的話就會避免取不到token的情況,之所以在login方法先判斷是否存在token快取,一是避免不必要的請求,二是避免重複請求