在JavaScript中,等待多个异步回调返回可以通过使用Promise和async/await来实现。
首先,可以使用Promise.all()方法来等待多个异步操作完成。该方法接收一个Promise对象数组,如果所有Promise对象都成功完成,则返回一个包含所有Promise对象结果的数组,否则返回一个拒绝状态的错误对象。
例如,以下代码使用Promise.all()来等待两个异步回调返回:
const p1 = fetch('https://example.com/api/v1/user')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
const p2 = fetch('https://example.com/api/v1/product')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
Promise.all([p1, p2])
.then(values => {
console.log(values);
})
.catch(error => {
console.error(error);
});
在上述代码中,Promise.all()方法接收一个Promise对象数组,并将所有Promise对象放入一个数组中。然后,它等待所有Promise对象都成功完成,并将它们的值作为数组返回。如果在等待过程中任何一个Promise对象被拒绝,则返回一个拒绝状态的错误对象。
除了Promise.all()方法之外,还可以使用async/await语法来等待多个异步回调返回。async/await是一种语法糖,它可以让我们更容易地编写异步代码,并使代码更易于阅读和理解。
以下是一个使用async/await等待多个异步回调返回的示例代码:
async function fetchData() {
try {
const [p1Response, p2Response] = await Promise.all([
fetch('https://example.com/api/v1/user'),
fetch('https://example.com/api/v1/product')
]);
const [user, product] = await Promise.all([
p1Response.json(),
p2Response.json()
]);
console.log({ user, product });
} catch (error) {
console.error(error);
}
}
fetchData();
在上述代码中,我们使用async/await语法将Promise.all()和Promise.allSettled()方法包装在async函数中。然后,在try/catch块中,我们使用await语法等待所有异步操作完成,并使用Promise.allSettled()方法来获取所有异步操作的返回结果。如果其中任何一个异步操作返回了拒绝状态,则会立即抛出错误,并执行catch块中的代码。
以上两种方法都可以用来等待多个异步回调返回,具体使用哪种方法取决于个人喜好和需求。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云