小程序接口的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学习3:操作元素属性和特性
Feb 07 Javascript
JSON 数据格式介绍
Jan 13 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
nuxt引入组件和公共样式的操作
Nov 05 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使用codebase生成随机数
2014/03/25 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
Js callBack 返回前一页的js方法
2008/11/30 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python简单实现计算过期时间的方法
2015/06/09 Python
Python用zip函数同时遍历多个迭代器示例详解
2016/11/14 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Python列表(List)知识点总结
2019/02/18 Python
Python中字符串List按照长度排序
2019/07/01 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
HelloFresh澳大利亚:订购你的美味食品盒、健康餐食
2018/03/28 全球购物
Why we need EJB
2016/10/20 面试题
社区反邪教工作方案
2014/06/16 职场文书
2015年司机工作总结
2015/04/23 职场文书
酒吧七夕情人节宣传语
2015/11/24 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis