小程序接口的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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
JS实现简单的表格增删
Jan 16 Javascript
ES6中的Javascript解构的实现
Oct 30 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代码优化及php相关问题总结
2006/10/09 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
yii2的restful api路由实例详解
2019/05/14 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
js 毫秒转天时分秒的实例
2017/11/17 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
React优化子组件render的使用
2019/05/12 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
vue实现手机端省市区区域选择
2019/09/27 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python实现telnet服务器的方法
2015/07/10 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python datetime模块的使用示例
2021/02/02 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
const和static readonly区别
2013/05/20 面试题
Python中如何定义一个函数
2016/09/06 面试题
服装店营销方案
2014/03/10 职场文书
平面设计求职信
2014/03/10 职场文书
中学生英语演讲稿
2014/04/26 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js