溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間:2020-09-12 09:25:49 來源:腳本之家 閱讀:258 作者:xiaochun365 欄目:編程語言

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

小程序中函數(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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI