您当前的位置: 首页 > 解决方案

以小程序为例,学习如何将异步回调接口 Promise 化

  • 作者: admin
  • 发布于 2019-01-26 10:12:27
  • 来源:  
  • 栏目:解决方案

导语: 前言 ES6 标准的 Promise 解决了 Javascript 代码中比较常见的回调地狱问题,搭配 async/await 可以用同步的

 

前言

ES6 标准的 Promise 解决了 Javascript 代码中比较常见的回调地狱问题,搭配 async/await 可以用同步的方式写异步逻辑,大大提高了开发效率。

但是至今仍有很多库没有实现 Promise 化的接口,其中就包括微信小程序的 api。

为了不向恶势力妥协,写出风格统一的代码,我们有必要了解何为 Promise

本文假定读者有一定 JavaScript 基础,同时了解 Promise 的基本用法。

回调接口

异步回调接口指的是通过传递函数来处理异步方法调用,一般有两种方式。

  • 小程序方式

    分别传递成功和失败的回调以处理两种不同情况

    wx.showToast({   title: 'Hello, world',   success: () => console.log('success'),   fail: () => console.log('failure'), }) 复制代码
  • MongoDB 方式

    传递一个以 error 为首参数的回调用以鉴别是否调用成功

    db.find({ name: 'Idan Loo' }, (err, data) => {   if (err) {     // err 是调用失败的原因     console.log(err)     return   }   // data 就是异步传递回来的参数   console.log(data) }) 复制代码

两种方式各有千秋,这里仅讨论微信方式,MongoDB 方式的接口 Promise 化相信各位可以举一反三。

Promise 化

简单实现

以 showToast 为例

const showToast = option =>   new Promise((resolve, reject) =>      wx.showToast({...option,       success: resolve,       fail: reject,     })   )  showToast({ title: 'Hello, Promise' })   .then(() => console.log('success'))   .catch(() => console.log('failure'))  复制代码

你已经知道了如何 Promise 化小程序的接口,现在你只需要重复上面的代码,将所有你需要用到的接口改为 Promise的即可。

高级一点的实现

复制粘贴一把梭虽然快,但是作为一名程序员,自然应该追求更简洁的实现。

通过观察,小程序所有的异步接口都采用了相同的形式,并且都位于 wx 对象中,故我们可以抽象出通用的 promisify方法用以 Promise 化小程序的接口

const promisify = name => option =>    new Promise((resolve, reject) =>     wx[name]({...option,       success: resolve,       fail: reject,     })   )  const showToast = promisify('showToast') const request = promisify('request') 复制代码

现在只需一行代码,就可以 Promise 化小程序的接口,赶紧把之前写的丑陋的回调代码改过来吧!

更高级的实现

如果你跟我一样,代码洁癖到上述代码都接受不了的话,那恭喜你,通过 Proxy 可以更好的实现我们的目标。

const pro = new Proxy(wx, {   get(target, prop) {     return promisify(prop)   } })  pro.showToast({ title: 'Hello, world' }).then(...) pro.request({ url: 'https://github.com' }).then(...) 复制代码

在 promisify 方法的基础上,给 wx 对象加了个代理,现在你可以像使用 wx 对象一样使用 pro,并且所有的异步方法都变成了 Promise 形式的!

无需实现

最好的实现就是交给别人实现,正好我已经把前文中的代码打包上传, minapp-promise,不足 1k,开箱即用。

能看到这里着实不易,希望你们能给我点个赞,顺便在 GitHub 给我个星星就更好了。

手机码字,如有错漏,万望斧正。



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部