小程序接口的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新手语法小结
Jun 15 Javascript
javascript 写类方式之六
Jul 05 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
深入探究node之Transform
Jul 20 Javascript
react 组件传值的三种方法
Jun 03 Javascript
js实现一个简易计算器
Mar 30 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
vue倒计时刷新页面不会从头开始的解决方法
Mar 03 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
浅谈php自定义错误日志
2015/02/13 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP 裁剪图片
2021/03/09 PHP
利用javascript判断文件是否存在
2013/12/31 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
详解python单例模式与metaclass
2016/01/15 Python
Python入门教程之运算符与控制流
2016/08/17 Python
简单谈谈Python中的闭包
2016/11/30 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python删除不需要的python文件方法
2018/04/24 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Python3多线程操作简单示例
2018/05/22 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
工业设计专业推荐信
2013/10/29 职场文书
人力资源经理自我评价
2014/01/04 职场文书
好军嫂事迹材料
2014/01/15 职场文书
大学生先进事迹材料
2014/02/16 职场文书
交通工程专业推荐信
2014/09/06 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
档案管理员岗位职责
2015/02/12 职场文书
春节晚会开场白
2015/05/29 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android