小程序接口的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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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
咖啡常见的种类
2021/03/03 新手入门
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python实现剪切功能
2019/01/23 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python中字符串与编码示例代码
2019/05/20 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
劳资专员岗位职责
2013/12/27 职场文书
银行职业规划书范文
2013/12/28 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
普通话演讲稿
2014/09/03 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
会计实训总结范文
2015/08/03 职场文书
MySQL创建管理RANGE分区
2022/04/13 MySQL