async/await & Promise的再认识
背景
在开发微信小程序过程中，遇到如下需求：
需要等待wx.requestPayment的回调函数执行完后再执行后续代码
这是因为在调用wx.requestPayment之后，会弹出一个支付弹窗，如果此时点击右上角的x，那么将会执行wx.requestPayment的回调函数fail中的代码。而由于wx.requestPayment的回调函数是异步执行的，所以程序会继续跑下去执行后面的代码。这会出现什么问题呢？
async fabu(){
const res = await wx.requestPayment({
...params,
success: function (res) {
console.log('Payment success');
//...(假设这里是支付成功后的代码)
},
fail: function (error) {
console.log('Payment failed', error);
}
});
//...(假设这里是支付成功后的代码)
}
1.如果我把支付成功后的代码写到wx.requestPayment的后面，那么在我点击了右上角的x后，程序会执行后续的代码，导致我明明没有支付却执行了支付成功的代码。
2.如果我把支付成功后的代码写到wx.requestPayment的回调函数（succes）里，那么会出现：在弹出弹窗等待用户进行支付操作之后，程序会继续执行wx.requestPayment后面的代码的现象，这会导致用户未完成支付操作，fabu()这个函数就已经执行完并返回结果了。
Solution
由于wx.requestPayment的回调函数是异步执行的，而且微信开发者工具不支持直接使用async/await等待回调函数的执行完成，所以无法直接通过在wx.requestPayment前加上await来等待回调函数执行完毕。
不过，可以使用Promise和resolve来手动实现等待回调函数执行完毕后再执行后续代码的效果。
async doPayment(params) {
let that = this;
try {
const paymentResult = await new Promise((resolve, reject) => {
wx.requestPayment({
...params,
success: function (res) {
console.log('Payment success');
resolve(res); // 在成功回调函数中手动触发resolve，并传递回调数据
},
fail: function (error) {
//如果不是耗时处理，处理支付失败的情况可以写在这
console.log('Payment failed in', error);
reject(error); // 在失败回调函数中手动触发reject，并传递错误信息
}
});
});
console.log('Continue with the next steps');
// 在这里可以执行支付成功后的代码
} catch (error) {
//如果是耗时处理，处理支付失败的情况可以写在这
console.log('Payment failed out', error);
}
console.log('这里是try catch块后面的代码');
},
这里我们在doPayment函数中使用await new Promise来等待wx.requestPayment的完成，并获取支付结果。在成功情况下，输出"Payment success"，然后可以执行后续代码。在失败情况下，输出"Payment failed"并打印错误信息，可以在catch块中处理支付失败的情况。
这样我们就能做到等待wx.requestPayment的回调函数执行完后再执行后续代码，如图所示：文章来源：https://www.toymoban.com/news/detail-704198.html
文章来源地址https://www.toymoban.com/news/detail-704198.html
到了这里，关于微信小程序等待wx.requestPayment的回调函数执行完后再执行后续代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
