小程序接口的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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
jquery不常用方法汇总
Jul 26 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
Vue的props父传子的示例代码
May 20 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开发文件系统实例讲解
2006/10/09 PHP
apache rewrite_module模块使用教程
2008/01/10 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
许愿墙中用到的函数
2006/10/07 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
Yahoo-PHP面试题1
2016/07/20 面试题
光声世纪笔试题目
2012/08/25 面试题
中专生毕业自我鉴定
2013/11/01 职场文书
财务内勤岗位职责
2014/04/17 职场文书
大学生个人求职信
2014/06/02 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
授权委托书(完整版)
2014/09/10 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书