前言
小程序中存在大量異步調用的接口,例如最常用的wx.login()、wx.getUserInfo()、wx.setStorage()、wx.getStorage()、wx.request(),雖然官方對部分接口也做出了同步版本,例如wx.setStorageSync、wx.getStorageSync(),但是在實際開發中始終要面對異步處理這個問題。
(ps:新版的微信開發者工具已經支持async/await的使用了,只需要勾選將js編譯成ES5,或者使用promise()對異步進行處理,詳細見下方)
由於沒有編寫小程序的經驗,一遇到異步問題果斷想起了async/await,但在使用過程中看到程序的輸出順序就發現不對勁(用了跟沒用一樣)。百度一番后發現小程序默認不支持async/await,需要在開發者工具右上角點擊詳情-->本地設置-->增強編譯來增強 ES6 轉 ES5 的能力。
或者打插件npm install regenerator實現異步處理。
(以上兩種方法我都沒有使用,直接用了promise)
promise()
比如要實現當方法A執行完再實現方法B。
那么需要在方法A中返回一個promise,返回的promise中進行數據操作,成功的數據傳入resolve,失敗的結果傳入reject。
接着在方法B中調用方法A,用.then 和 .catch 分別對成功和失敗的結果進行處理。
例子:
// 方法A
testA() {
return new Promise((resolve, reject) => {
wx.request({
url: 'xxxxxxx',
success: res => {
resolve(res)
},
fail: res => {
reject('失敗啦')
}
})
})
},
//方法B
testB() {
this.testA().then(res => { // 方法A執行完后執行方法B
// 填寫方法B的內容
...
console.log(res) // 輸出內容:res
}).catch(res => {
console.log(res) // 輸出內容:'失敗啦'
})
}