小程序接口的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实现单继承和多继承的简单方法
Mar 29 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 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
php Undefined index的问题
2009/06/01 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python中的set实现不重复的排序原理
2018/01/24 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
采购人员的个人自我评价
2014/01/16 职场文书
承租经营合作者协议书
2014/10/01 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python