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


Posted in Javascript onDecember 11, 2019

最近在写微信小程序,为了能用上 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);
}

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

Javascript 相关文章推荐
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
Vue 去除路径中的#号
Apr 19 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 #Javascript
jQuery实现验证用户登录
Dec 10 #jQuery
这样回答继承可能面试官更满意
Dec 10 #Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
微信小程序 this.triggerEvent()的具体使用
Dec 10 #Javascript
jQuery实现消息弹出框效果
Dec 10 #jQuery
jQuery实现弹出层效果
Dec 10 #jQuery
You might like
一个捕获函数输出的函数
2007/02/14 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python抓取网页内容示例分享
2014/02/24 Python
举例讲解Python中is和id的用法
2015/04/03 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
三查三看党性分析材料
2014/02/18 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
六查六看心得体会
2014/10/14 职场文书
行政前台岗位职责
2015/04/16 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
同意落户证明
2015/06/19 职场文书