如何等待循环完成？

Question

让我先给你看看代码是什么样子的

 Cart.getCompleteCart((cart)=>{
    
       let products = []; *//this Array has to be filled*

       totalPrice = cart.totalPrice;

       for(let prod of cart.products){

                Product.getProductDetails(prod.productId, productDetails => {
                    products.push({
                        product: productDetails,
                        productCount: prod.productCount
                    });
                });

      }
      console.log("Products are ->", products); *//this line is running before for loop!*
 }
       

console.log() 在 for 循环完成其工作之前运行。

如何与 console.log() 同步运行“for 循环”？

Answer 1

我假设这Product.getProductDetails()是一个异步方法（它看起来像是对 API 的查询）。

console.log()不是“在for循环之前运行”，只是执行的任务Product.getProductDetails()是异步处理的。

由于该Product.getProductDetails()方法似乎也适用于回调，因此实现目标的一种方法是承诺每个调用，然后使用Promise.all()方法将所有承诺浓缩为一个。

像这样的事情应该可以解决问题：

Cart.getCompleteCart((cart) => {
    const promises = [];

    for (let prod of cart.products) {
        promises.push(
            new Promise((resolve) => {
                Product.getProductDetails(prod.productId, (productDetails) => {
                    resolve({
                        product: productDetails,
                        productCount: prod.productCount
                    });
                });
            })
        );
    }

    Promise.all(promises).then((products) => {
        console.log('Products are ->', products);
    });
});

或者：

Cart.getCompleteCart((cart) => {
    Promise.all(
        cart.products.map((prod) => {
            return new Promise((resolve) => {
                Product.getProductDetails(prod.productId, (productDetails) => {
                    resolve({
                        product: productDetails,
                        productCount: prod.productCount
                    });
                });
            });
        })
    ).then((products) => {
        console.log('Products are ->', products);
    });
});