小程序接口的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 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
openPNE常用方法分享
2011/11/29 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
在Python中处理字符串之isdecimal()方法的使用
2015/05/20 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
《鱼游到了纸上》教学反思
2014/02/20 职场文书
招标保密承诺书
2015/01/20 职场文书
施工安全员岗位职责
2015/04/11 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android