小程序接口的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 tab插件制作实现代码
Jun 22 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
js实现简单五子棋游戏
May 28 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
3种平台下安装php4经验点滴
2006/10/09 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
详解jQuery选择器
2016/12/21 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
Python实现的排列组合计算操作示例
2017/10/13 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
用Python 执行cmd命令
2020/12/18 Python
如何利用python 读取配置文件
2021/01/06 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
结婚典礼主持词
2015/06/29 职场文书
文明礼貌主题班会
2015/08/14 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
Python获取字典中某个key的value
2022/04/13 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers