微信小程序中promise的使用

- 日理万妓 2021-12-04 00:11 684阅读 0赞

**简介**

相信看到这篇文章的同学，都已经对微信小程序的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进行了包裹，我个人觉得应该还有更好的方法，只是我暂时也不知道还应该采用什么方式可以更好的书写，如果有人有好的方法，欢迎留下评论或者截图，谢谢。