小程序接口的promise化的实现方法

 更新时间:2019年12月11日 08:26:58   作者:madRain  
这篇文章主要介绍了小程序接口的promise化的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在写微信小程序,为了能用上 async/await 方法,需要把微信提供的异步操作包装成 Promise 对象,为此写了一个简单的 promise(fie) 函数:

/**
 * @function promise - 将 wx 接口 promise 化
 * 
 * @param { String|Function } wxApi - 需要转换的接口/接口名
 * @param { Object|Any } [originParam = {}] - 原接口要求的参数对象
 * @param { Object|Any } [extra] - 接口要求的其他参数
 */
function promise(wxApi, originParam = {}, extra){
 const api = wxApi instanceof Function?
  wxApi:
  wx[wxApi];

 return new Promise((done, fail) =>
  api(Object.assign(
   originParam,
   {
    success: done,
    failed: fail
   }
  ),
  extra)
 );
}

正当我沾沾自喜、兴致冲冲地调用拍照接口测试时,控制台扔给我一个 “this._invokeMethod is not a Function” 的错误。显而易见,由于 wxApi 被当做参数传递,执行时的 this 与预期不一致,因此需要显式指定上下文,遂把函数再改改:

/**
 * @function promise - 将 wx 接口 promise 化
 * 
 * @param { String|Function } wxApi - 需要转换的接口/接口名
 * @param { Object|Any } [originParam = {}] - 原接口要求的参数对象
 * @param { Object|Any } [context = wx] - 执行上下文
 * @param { Object|Any } [extra] - 接口要求的其他参数
 */
function promise(wxApi, originParam = {}, context = wx, extra){
 const api = wxApi instanceof Function?
  wxApi:
  context[wxApi];

 return new Promise((done, fail) =>
  api.call(context, Object.assign(
   originParam,
   {
    success: done,
    failed: fail
   }
  ),
  extra)
 );
}

由于大部分接口都是 wx 的方法,因此这个 promise 方法在大多数情况下还是比较省事的。不过拍照接口是 cameraContext 的方法,所以传递的是 createCameraContext 方法的返回值:

/**
 * @function takePhoto - promise风格的拍照接口
 * 
 * @param { Object|Any } [options = {}] - 相机配置
 * 
 * @return {Promise}
 */
export function takePhoto(options = {}){
  const tempOptions = {
    quality: 'high',
    ...options
  }

 const cameraContext = createCameraContext();

 return promise(cameraContext.takePhoto, tempOptions, cameraContext);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS实现在线统计一个页面内鼠标点击次数的方法

    JS实现在线统计一个页面内鼠标点击次数的方法

    这篇文章主要介绍了JS实现在线统计一个页面内鼠标点击次数的方法,实例分析了javascript操作Cookie实现计数的技巧,需要的朋友可以参考下
    2015-02-02
  • JS加jquery简单实现标签元素的显示或隐藏

    JS加jquery简单实现标签元素的显示或隐藏

    标签元素的显示或隐藏在使用中还是挺频繁的,下面有个不错的示例,大家可以参考下,或许有所帮助
    2013-09-09
  • Array数组对象中的forEach、map、filter及reduce详析

    Array数组对象中的forEach、map、filter及reduce详析

    这篇文章主要给大家介绍了关于Array数组对象中forEach、map、filter及reduce的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用array数据具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-08-08
  • 微信WeixinJSBridge API使用实例

    微信WeixinJSBridge API使用实例

    这篇文章主要介绍了微信WeixinJSBridge API使用实例,本文直接给出HTML代码,代码中包含了很多实用功能,如图片预览、分享到微博、隐藏右上角按钮、获取网络状态、发起公众号微信支付等内容,需要的朋友可以参考下
    2015-05-05
  • Echarts图表点击x轴y轴切换图表二级数据实例代码

    Echarts图表点击x轴y轴切换图表二级数据实例代码

    最近项目用到了Echarts图进行数据展示,所以下面这篇文章主要给大家介绍了关于Echarts图表点击x轴y轴切换图表二级数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • 小程序实现下拉列表框菜单

    小程序实现下拉列表框菜单

    这篇文章主要为大家详细介绍了小程序实现下拉列表框菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 对Layer UI 模块化的用法详解

    对Layer UI 模块化的用法详解

    今天小编就为大家分享一篇对Layer UI 模块化的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 小程序云开发获取不到数据库记录的解决方法

    小程序云开发获取不到数据库记录的解决方法

    这篇文章主要为大家详细介绍了小程序云开发获取不到数据库记录的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • 在TypeScript中泛型的使用方法及场景

    在TypeScript中泛型的使用方法及场景

    泛型是TypeScript中的一个强大特性,它可以增加代码的灵活性和安全性,在本文中,我将向您介绍泛型的使用方法和场景,并展示如何使用类型约束,需要的朋友可以参考下
    2023-08-08
  • 微信小程序获取微信运动步数的实例代码

    微信小程序获取微信运动步数的实例代码

    本篇文章主要介绍了微信小程序微信运动步数的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论