小程序接口的promise化的实现方法

 更新时间:2019年12月11日 08:26:58   作者:madRain  
这篇文章主要介绍了小程序接口的promise化的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在写微信小程序,为了能用上 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);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • fastadmin中调用js的方法

    fastadmin中调用js的方法

    这篇文章主要介绍了fastadmin中调用js的方法,在文中给大家补充介绍了Fastadmin里面的js运行原理,需要的朋友可以参考下
    2019-05-05
  • js实现列表向上无限滚动

    js实现列表向上无限滚动

    这篇文章主要为大家详细介绍了js实现列表向上无限滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • javaScript 动态访问JSon元素示例代码

    javaScript 动态访问JSon元素示例代码

    访问JSon元素的方法有很多,在搜的时候会找到很多,本文使用javascript来动态访问json元素,感兴趣的朋友可以练练手哦
    2013-08-08
  • WebStorm中如何将自己的代码上传到github示例详解

    WebStorm中如何将自己的代码上传到github示例详解

    这篇文章主要介绍了WebStorm中如何将自己的代码上传到github,本文分步骤通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • 结合 ES6 类编写JavaScript 创建型模式

    结合 ES6 类编写JavaScript 创建型模式

    这篇文章主要介绍了结合ES6类编写JavaScript创建型模式,本文开始系统性的对20多种JavaScript 设计模式进行简单概述,然后结合ES6类的方式来编写实例代码展示其使用方式,需要的朋友可以参考一下
    2022-07-07
  • uni-app瀑布流效果实现方法

    uni-app瀑布流效果实现方法

    Uni-app是一个基于Vue.js开发跨平台应用的框架,它可以将代码编译成多个平台下的原生应用,这篇文章主要给大家介绍了关于uni-app瀑布流效果的相关资料,需要的朋友可以参考下
    2023-12-12
  • JavaScript内置日期、时间格式化时间实例代码

    JavaScript内置日期、时间格式化时间实例代码

    JS中的 Date 对象用于处理日期和时间,Date对象和Math对象不一样,Date是一个构造函数,需要实例化后才能使用对象中具体的方法和属性。这篇文章主要给大家介绍了关于JavaScript内置日期、时间格式化时间的相关资料,需要的朋友可以参考下
    2021-05-05
  • JS Promise axios 请求结果后面的.then() 是什么意思

    JS Promise axios 请求结果后面的.then() 是什么意思

    本文主要介绍了JS Promise axios 请求结果后面的 .then() 是什么意思,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Firefox下无法正常显示年份的解决方法

    Firefox下无法正常显示年份的解决方法

    在用Firefox上一些网站会看到这样的显示108年1月26日,而IE显示为2008年1月26日原因是javascrīpt的兼容性问题
    2014-09-09
  • 详解JavaScript 作用域

    详解JavaScript 作用域

    这篇文章主要介绍了JavaScript 作用域的相关资料,文中讲解非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07

最新评论