小程序接口的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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
Oct 17 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
JavaScript实现密码强度实时验证
Mar 18 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
简单的前端js+ajax 购物车框架(入门篇)
2011/10/29 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python编程二分法实现冒泡算法+快速排序代码示例
2018/01/15 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python中的时区问题
2021/01/14 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
廉政教育心得体会
2014/01/01 职场文书
银行贷款承诺书
2014/03/29 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
病危通知单
2015/04/17 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
论语读书笔记
2015/06/26 职场文书
结婚仪式主持词
2015/06/29 职场文书
2016七夕情人节感言
2015/12/09 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书