增強(qiáng)微信小程序API

為什么要增強(qiáng)微信小程序API

微信小程序因其雙線程框架，導(dǎo)致大部分API都是異步API，比如，最常用的wx.request。而小程序的API的設(shè)計(jì)，都是采用回調(diào)形式。這樣，業(yè)務(wù)過(guò)于復(fù)雜的時(shí)候，就會(huì)陷入回調(diào)地獄中，而且代碼的可讀性也變差。

材料準(zhǔn)備

提到異步編程，Promise就該閃亮登場(chǎng)了。

Promise

微信小程序有眾多的API，總不能用到哪個(gè)，封裝哪個(gè)，這樣太繁瑣了，還是得統(tǒng)一封裝一下，復(fù)制一套微信小程序API，代理異步方法，封裝成Promise。說(shuō)道代理，Proxy要閃亮登場(chǎng)了，但是，微信小程序除了iOS10+以上的系統(tǒng)，其他環(huán)境并不支持Proxy，好吧，只能讓Proxy歇歇了。老老實(shí)實(shí)的使用Object.defineProperty代理吧。

Object.defineProperty

擼代碼環(huán)節(jié)

工具函數(shù)走起

判斷是否為對(duì)象

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

遞歸深拷貝對(duì)象

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)

導(dǎo)出增強(qiáng)API

export {
  wxapi
}

app.js中導(dǎo)入掛載

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

END

盡情的then，async/await吧。·