简介
相信看到这篇文章的同学,都已经对微信小程序的api文档有所了解了,也都经历了微信小程序api回调函数嵌套的痛苦,才会想要通过Promise解决回调地狱这个问题,我下面就直接介绍怎么在小程序中使用promise。
历史问题
很多同学肯定看到一些介绍微信小程序中使用Promise的文章,告诉你说微信小程序不支持Promise,需要自己引入es6-promise,或者需要使用一些第三方的promise,就我看到的如bluebird等,老版本的微信小程序应该是不支持es6中的Promise的,但是2018年以后的微信小程序肯定是支持的,所以可以直接使用,不需要再引入第三方的Promise了。另外如果还不了解什么是Promise的话,建议自行查找相应的Promise介绍与使用方法。
使用说明
首先可以在util.js文件中定义函数wxPromisify,这个函数的作用就是把小程序api使用Promise进行包裹,从而使用时可以以Promise的优势书写代码
/** * wxPromisify * @fn 传入的函数,如wx.request、wx.download */function wxPromisify(fn) { return function (obj = {}) { return newPromise((resolve, reject) => { obj.success = function (res) { resolve(res) } obj.fail = function (res) { reject(res) } fn(obj)//执行函数,obj为传入函数的参数 }) }}module.exports = { wxPromisify: wxPromisify}
下面介绍wxPromisify函数的使用
var Promisify = require('./utils.js')//具体引入路径根据具体情况var getSystemInfo = Promisify.wxPromisify(wx.getSystemInfo);//获取系统信息var getUserInfo = Promisify.wxPromisify(wx.getUserInfo);//获取用户信息var downloadFile = Promisify.wxPromisify(wx.downloadFile);//预下载文件var request = Promisify.wxPromisify(wx.request);//ajax请求
上面的代码就是通过wxPromisify函数重新定义了小程序的api
在你需要使用Promise的js文件内或者直接在util.js中定义新构建的函数都是可以的
重新定义函数后的使用方法如下代码所示
getUserInfo().then(res =>{ console.log(res) })request({ url: 'https://tqklm.com/auth/news/page', method: 'GET', header:{'content-type': 'json' }}).then(res => { console.log(res.data.data.records) getUserInfo() .then(res =>{ console.log(res) }) })
上面一段代码分别表现了两种情况,一种是直接使用,另一种是函数嵌套的使用以及参数的传递。
小结
上面这种方法虽然看似使用了Promise,解决了回调地狱代码复杂难以阅读的问题,但是实际上只是简单地对小程序的api进行了包裹,我个人觉得应该还有更好的方法,只是我暂时也不知道还应该采用什么方式可以更好的书写,如果有人有好的方法,欢迎留下评论或者截图,谢谢。