Notice: Undefined index: seotitled in /www/wwwroot/www.geekeweb.com/wechat-details.php on line 16
增强微信小程序API,远离回调地狱

增强微信小程序API,远离回调地狱

发布日期:2020-09-05  浏览:1297 

 增强微信小程序API,远离回调地狱

增强微信小程序API

为什么要增强微信小程序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吧。·