为什么要增强微信小程序API

微信小程序因其双线程框架,导致大部分API都是异步API,比如,最常用的wx.request。而小程序的API的设计,都是采用回调形式。这样,业务过于复杂的时候,就会陷入回调地狱中,而且代码的可读性也变差。

材料准备

提到异步编程,Promise就该闪亮登场了。

Promise

微信小程序有众多的API,总不能用到哪个,封装哪个,这样太繁琐了,还是得统一封装一下,复制一套微信小程序API,代理异步方法,封装成Promise。说道代理,Proxy要闪亮登场了,但是,微信小程序除了iOS10+以上的系统,其他环境并不支持Proxy,好吧,只能让Proxy歇歇了。老老实实的使用Object.defineProperty代理吧。

Object.defineProperty

撸代码环节

工具函数走起

判断是否为对象

function isObject (object) {
  return Object.prototype.toString.call(object) === '[object Object]'
}

递归深拷贝对象

function copy (object, target) {
  let copyobject = target || {}
  const keys = Object.keys(object)
  keys.forEach(key => {
    if (isObject(object[key])) {
      copy(object[key], copyobject[key])
    } else {
      copyobject[key] = object[key]
    }
  })
  return copyobject
}

增强吧,比卡丘

代理走你

function proxyProperty (object, property) {
  const value = object[property]
  Object.defineProperty(object, property, {
    get () {
      if (typeof value === 'function' && !/(Sync)$/.test(property)) {
        return function(params, ...args) {
          return new Promise((resolve, reject) => {
            value ({
              ...params,
              success: res => {
                params && params.success && params.success(res);
                resolve(res);
              },
              fail: err => {
                params && params.fail && params.fail(err);
                reject(err)
              }
            }, ...args);
          });
        }.bind(object);
      } else {
        return value
      }
    }
  })
}

function proxy (object) {
  const keys = Object.keys(object)
  keys.forEach(key => {
    if (isObject(object[key])) {
      proxy(object[key])
    } else {
      proxyProperty(object, key)
    }
  })
}

let wxapi = copy(wx)
proxy(wxapi)

后续使用

导出增强API

export {
  wxapi
}

app.js中导入挂载

import { wxapi } from './utils/util.js';
App({
  wxapi
})

END

尽情的then,async/await吧。


李小凡Amy
1 声望0 粉丝