本文介绍如何在微信小程序中使用Promise对象简化复杂的异步回调操作。通过封装wx提供的success/fail接口，将传统的嵌套回调转换为链式调用，有效解决“回调金字塔”问题，提升代码可读性。该方法同样适用于Node.js及网页开发，并提供完整示例代码供参考。
Promise 简介
Promise 是处理异步编程的一种方案，相比传统的回调函数和事件机制，它更加合理且功能强大。该概念由社区率先提出并实现，随后被纳入 ES6 语言标准，统一了使用规范，并由原生提供 Promise 对象支持。
简单来说，Promise 是一个容器，用于保存未来才会结束的事件（通常是异步操作）的结果。从语法角度看，Promise 是一个对象，可以通过它获取异步操作的状态信息。Promise 提供了统一的 API，使得各种异步操作都可以采用相同的方式进行处理。
了解什么是 Promise 对象
回调金字塔问题
在开发过程中，经常遇到各种异步操作。如果一个异步操作的回调函数内部还包含其他异步操作，就会形成层层嵌套的结构，俗称“回调金字塔”。
比如下面这种
// 模拟获取code，然后将code传给后台，成功后获取userinfo，再将userinfo传给后台
// 登录
wx.login({
success: res => {
let code = res.code
// 请求
imitationPost({
url: '/test/loginWithCode',
data: {
code
},
success: data => {
// 获取userInfo
wx.getUserInfo({
success: res => {
let userInfo = res.userInfo
// 请求
imitationPost({
url: '/test/saveUserInfo',
data: {
userInfo
},
success: data => {
console.log(data)
},
fail: res => {
console.log(res)
}
})
},
fail: res => {
console.log(res)
}
})
},
fail: res => {
console.log(res)
}
})
},
fail: res => {
console.log(res)
}
})
使用 Promise 简化代码
下面分析如何用Promise来进行简化代码
由于微信小程序的异步 API 通常采用 success 和 fail 的形式，因此有人封装了这样一个方法:
promisify.js
module.exports = (api) => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
});
}
}
先看最简单的:
// 获取系统信息
wx.getSystemInfo({
success: res => {
// success
console.log(res)
},
fail: res => {
}
})
使用上面的promisify.js简化后:
const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)
getSystemInfo().then(res=>{
// success
console.log(res)
}).catch(res=>{
})
getSystemInfo
可以看到简化后的回调里少了一个缩进，并且回调函数从9行减少到了6行。
简化效果对比
回调金字塔的简化效果
那么再来看看最开始的那个回调金字塔
const promisify = require('./promisify')
const login = promisify(wx.login)
const getSystemInfo = promisify(wx.getSystemInfo)
// 登录
login().then(res => {
let code = res.code
// 请求
pImitationPost({
url: '/test/loginWithCode',
data: {
code
},
}).then(data => {
// 获取userInfo
getUserInfo().then(res => {
let userInfo = res.userInfo
// 请求
pImitationPost({
url: '/test/saveUserInfo',
data: {
userInfo
},
}).then(data => {
console.log(data)
}).catch(res => {
console.log(res)
})
}).catch(res => {
console.log(res)
})
}).catch(res => {
console.log(res)
})
}).catch(res => {
console.log(res)
})
简化回调
可以看到简化效果非常明显。
适用范围与参考
同样适用于网页或者nodejs等中。
参考
Promise 对象
源代码
tomfriwel/MyWechatAppDemo 的promisePage页面
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。