快捷導(dǎo)航

詳解微信小程序同步異步解決辦法

更新時間：2017年06月23日 11:33:11 作者：xiaochun365

這篇文章主要介紹了詳解微信小程序同步異步解決辦法的相關(guān)資料,需要的朋友可以參考下

詳解微信小程序同步異步解決辦法

小程序中函數(shù)體還沒有完成，下一個函數(shù)就開始執(zhí)行了,而且兩個函數(shù)之間需要傳參。那是因為微信小程序函數(shù)是異步執(zhí)行的。但微信小程序增加了ES6的promise特性支持，微信小程序新版本中移除了promise的支持，需要自己使用第三方庫來自行實現(xiàn)ES6的promise特性。

WxService.js

import Tools from 'Tools'
import es6 from '../assets/plugins/es6-promise'

class Service {
 constructor() {
  this.__init()
 }

 /**
  * __init
  */
 __init() {
  this.tools = new Tools
  this.__initDefaults()
  this.__initMethods()
 }


 /**
  * __initDefaults
  */
 __initDefaults() {
  // 緩存非異步方法
  this.noPromiseMethods = [
   'stopRecord',
   'pauseVoice',
   'stopVoice',
   'pauseBackgroundAudio',
   'stopBackgroundAudio',
   'showNavigationBarLoading',
   'hideNavigationBarLoading',
   'createAnimation',
   'createContext',
   'hideKeyboard',
   'stopPullDownRefresh',
  ]

  // 緩存wx接口方法名
  this.instanceSource = {
   method: Object.keys(wx)
  }
 }

 /**
  * 遍歷wx方法對象，判斷是否為異步方法，是則構(gòu)造promise
  */
 __initMethods() {
  for (let key in this.instanceSource) {
   this.instanceSource[key].forEach((method, index) => {
    this[method] = (...args) => {
     // 判斷是否為非異步方法或以 wx.on 開頭，或以 Sync 結(jié)尾的方法
     if (this.noPromiseMethods.indexOf(method) !== -1 || method.substr(0, 2) === 'on' || /\w+Sync$/.test(method)) {
      return wx[method](...args)
     }
     return this.__defaultRequest(method, ...args)
    }
   })
  }

    /**
     * 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
     * @param {String} url 路徑
     * @param {Object} params 參數(shù)
     */
  this.navigateTo = (url, params) => {
   const $$url = this.tools.buildUrl(url, params)
   return new es6.Promise((resolve, reject) => {
    wx.navigateTo({
     url: $$url,
     success: res => resolve(res),
     fail: res => reject(res),
    })
   })
  }

  /**
  * 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
  * @param {String} url 路徑
  * @param {Object} params 參數(shù)
  */
  this.redirectTo = (url, params) => {
   const $$url = this.tools.buildUrl(url, params)
   return new es6.Promise((resolve, reject) => {
    wx.redirectTo({
     url: $$url,
     success: res => resolve(res),
     fail: res => reject(res),
    })
   })
  }
 }

 /**
  * 以wx下API作為底層方法
  * @param {String} method 方法名
  * @param {Object} obj  接收參數(shù)
  */
 __defaultRequest(method = '', obj = {}) {
  return new es6.Promise((resolve, reject) => {
   obj.success = (res) => resolve(res)
   obj.fail = (res) => reject(res)
   wx[method](obj)
  })
 }
}

export default Service

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: