⼩程序中promise的使⽤
简介
相信看到这篇⽂章的同学,都已经对⼩程序的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 new Promise((resolve, reject) => {
obj.success = function (res) {
resolve(res)
}
obj.fail = function (res) {
reject(res)
}
写文章的小程序fn(obj)//执⾏函数,obj为传⼊函数的参数
})
}
}
wxPromisify: wxPromisify
}
下⾯介绍wxPromisify函数的使⽤
var Promisify = require('./utils.js')//具体引⼊路径根据具体情况
var getSystemInfo = Promisify.SystemInfo);//获取系统信息
var getUserInfo = Promisify.UserInfo);//获取⽤户信息
var downloadFile = Promisify.wxPromisify(wx.downloadFile);//预下载⽂件
var request = Promisify.quest);//ajax请求
上⾯的代码就是通过wxPromisify函数重新定义了⼩程序的api
在你需要使⽤Promise的js⽂件内或者直接在util.js中定义新构建的函数都是可以的
重新定义函数后的使⽤⽅法如下代码所⽰
getUserInfo()
.then(res =>{
console.log(res)
})
request({
url: 'xindongpeixun/auth/news/page',
method: 'GET',
header:{
'content-type': 'json'
}
}).then(res => {
console.log(res.ds)
getUserInfo()
.then(res =>{
console.log(res)
})
})
上⾯⼀段代码分别表现了两种情况,⼀种是直接使⽤,另⼀种是函数嵌套的使⽤以及参数的传递。
⼩结
上⾯这种⽅法虽然看似使⽤了Promise,解决了回调地狱代码复杂难以阅读的问题,但是实际上只是简单地对⼩程序的api进⾏了包裹,我个⼈觉得应该还有更好的⽅法,只是我暂时也不知道还应该采⽤什么⽅式可以更好的书写,如果有⼈有好的⽅法,欢迎留下评论或者截图,谢谢。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论