微信小程序 同步异步解决方案

小程序中函数体还没有完成,下一个函数就开始执行了,而且两个函数之间需要传参。那是因为微信小程序函数是异步执行的。但微信小程序增加了ES6的promise特性支持,微信小程序新版本中移除了promise的支持,需要自己使用第三方库来自行实现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方法对象,判断是否为异步方法,是则构造promise
   */
  __initMethods() {
    for (let key in this.instanceSource) {
      this.instanceSource[key].forEach((method, index) => {
        this[method] = (...args) => {
          // 判断是否为非异步方法或以 wx.on 开头,或以 Sync 结尾的方法
          if (this.noPromiseMethods.indexOf(method) !== -1 || method.substr(0, 2) === 'on' || /\w+Sync$/.test(method)) {
            return wx[method](...args)
          }
          return this.__defaultRequest(method, ...args)
        }
      })
    }

        /**
         * 保留当前页面,跳转到应用内的某个页面
         * @param {String} url  路径
         * @param {Object} params 参数
         */
    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),
        })
      })
    }

    /**
   * 关闭当前页面,跳转到应用内的某个页面
   * @param {String} url  路径
   * @param {Object} params 参数
   */
    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    接收参数
   */
  __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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值