微信小程序之異步處理


前言

小程序中存在大量異步調用的接口,例如最常用的wx.login()wx.getUserInfo()wx.setStorage()wx.getStorage()wx.request(),雖然官方對部分接口也做出了同步版本,例如wx.setStorageSyncwx.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)	// 輸出內容:'失敗啦'
  })
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM