本文详解如何将微信小程序原生API从对象参数回调模式转换为Promise模式,以解决深层嵌套导致的代码可读性差、调试困难等问题。通过封装通用promisify函数,结合解构传递额外参数,实现简洁的链式调用,提升开发效率与代码维护性。
Promise化封装的原因
Promise化封装的原因
微信小程序的API默认采用对象参数配合回调函数的模式,这种设计在多层异步操作嵌套时极易形成“回调地狱”,导致代码结构混乱、逻辑难以阅读、判断复杂,同时也增加了后续修改和调试的难度。
微信小程序API示例
微信小程序API示例
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
}
})
}
}
})
当嵌套层级达到两层时,代码结构已显得非常别扭,可读性显著下降。
对小程序API进行Promise化封装
对小程序API进行Promise化封装
我们需要编写一个通用的工具函数,用于将小程序的异步API转换为Promise对象。
function promisify (method, options = {}) {
return new Promise((resolve, reject) => {
// 将options对象赋值 然后再传给下面调用的方法中
options.success = resolve
options.fail = err => {
reject(err)
}
wx[method](options)
})
}
使用示例
使用示例
通过对象解构的方式,可以将调用API时所需的额外参数灵活地传递给封装函数。
promisify('getUserInfo')
.then((res) => console.log(res))
.catch((err) => {console.error(err)})
promisify('navigateTo', { url })