小程序的Promise回调函数如何使用?能否举个例子。简单大白话那种,呵呵。例如 小程序里 同时打开 A 页面 和B 页面 ,b页面是通过扫a页面的二维码打开的。B页面用户提交确认信息后 如何使用Promise回调函数,把确认信息回调给A页面。
可是B页面是扫码打开的,也能用wx.navigateBack返回吗?
在小程序中,可以通过 new Promise() 创建一个 Promise 对象,然后通过 .then() 方法添加成功回调函数,通过 .catch() 方法添加失败回调函数。
以同时打开 A 页面和 B 页面为例,我们可以在 A 页面中使用以下代码跳转到 B 页面:
wx.navigateTo({
url: '/pages/B/B'
})
在 B 页面中,当用户提交确认信息后,我们需要将确认信息传递回 A 页面,可以通过 Promise 回调函数实现:
// B 页面的代码
const promise = new Promise((resolve, reject) => {
// 等待用户确认信息,假设用户确认信息是一个字符串
const userConfirmInfo = '确认信息';
if (userConfirmInfo) {
// 成功回调函数,将确认信息作为参数传递给 resolve 函数
resolve(userConfirmInfo);
} else {
// 失败回调函数,将错误信息作为参数传递给 reject 函数
reject('未获取到确认信息');
}
});
// 在页面关闭时触发回调函数
promise.then((userConfirmInfo) => {
// 将确认信息传递给 A 页面
wx.navigateBack({
success() {
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
prevPage.setData({
confirmInfo: userConfirmInfo
});
}
});
}).catch((err) => {
console.log(err);
});
回答:
使用Promise回调函数可以使得异步操作更加优雅,避免回调地狱的问题。在小程序中也可以使用Promise回调函数,下面是以打开A页面和B页面,B页面提交信息后将信息回传给A页面为例。
首先,在A页面调用wx.navigateTo方法打开B页面,并在B页面进行数据获取和提交操作,提交成功后将数据通过wx.navigateBack方法回传给A页面。这里需要将wx.navigateBack方法包装成一个Promise对象,以便在B页面的onUnload方法中进行调用。具体步骤如下:
在A页面中调用wx.navigateTo方法:
// A页面
wx.navigateTo({
url: '/pages/B/B'
}).then(res => {
// 接收B页面回传的数据
console.log(res);
}).catch(err => {
console.log(err);
});
在B页面中进行数据获取和提交操作,并在提交成功后调用wx.navigateBack:
// B页面
onSubmit() {
// 进行数据提交操作
wx.request({
url: 'xxx',
method: 'POST',
data: {
// 数据
},
success: res => {
// 提交成功,回传数据给A页面
wx.navigateBack({
delta: 1, // 返回1级
success: res => {
wx.Promise.resolve('数据回传成功');
},
fail: err => {
wx.Promise.reject('数据回传失败');
}
});
},
fail: err => {
console.log(err);
}
})
}
在A页面中对wx.navigateBack方法进行包装,返回一个Promise对象:
// A页面
wx.navigateToPromise = function(obj) {
return new Promise((resolve, reject) => {
wx.navigateTo({
...obj,
success: function(res) {
resolve(res);
},
fail: function(err) {
reject(err);
}
});
});
}
// 使用
wx.navigateToPromise({
url: '/pages/B/B'
}).then(res => {
// 接收B页面回传的数据
console.log(res);
}).catch(err => {
console.log(err);
});
这样,通过对wx.navigateBack方法进行包装,使用Promise回调函数回传数据就可以更加优雅地实现。