Why is my asynchronous function that calls another asynchronous function returning Promise { } instead of a value?

Question

I have an asynchronous function that calls another asynchronous function within it. This asynchronous function is returning "< pending >" instead of a value. Below is what I am getting.

temp [
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]

Could you please help me solve this issue?

Here is the first asynchronous function:

router.get('/all', async (req, res, next) => {
  ProductTable.getAllProducts()
    .then(async ({ allProducts }) => {
        const newAllProducts = await updateAllProducts(allProducts);

        res.json({ allProducts });
    })
    .catch(error => next(error));
 });

As you can see, I am calling updateAllProducts function and store that value into a variable call newAllProducts. updateAllProducts is another asynchronous function.

Here is the code for updateAllProducts:

const updateAllProducts = async (allProducts) => {
  const temp = await allProducts.map(async (product, index) => {
      const url = product.url;

      const { currentPrice, newSizes } = await scrapeData(url);
      const { currentAvailableSizes, unavailableSizes } = newSizes;

      const long = product.availableSizes.length >= currentAvailableSizes.length ? product.availableSizes : currentAvailableSizes;
      const short = product.availableSizes.length <= currentAvailableSizes.length ? product.availableSizes : currentAvailableSizes;
      const availableSizesDiff = long.filter(x => short.indexOf(Number(x)) === -1);

      product.currentPrice = currentPrice;
      product.priceDiff = 1000;
      product.currentAvailableSizes = currentAvailableSizes;
      product.availableSizesDiff = availableSizesDiff;
  });

  return temp;
}

This updateAllProducts function is calling another asynchronous function call scrapeData within it.

ScrapeData function is just a function that uses puppeteer library to scrape data from a webpage. Here is the code:

const scrapeData = async (url) => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();

   await page.goto(url);

   const currentPrice = await page.evaluate(() => {
      if(document.querySelectorAll('[data-test="product-price-reduced"]').length !== 0) {
        return document.querySelectorAll('[data-test="product-price-reduced"]')[0].textContent;
      } else {
        return document.querySelectorAll('[data-test="product-price"]')[0].textContent;
      }
   });

   const newProductInfo = { currentPrice };

   return newProductInfo;
 }

You can't `await` a `.map` method like that. It won't wait for the promises. — Guy Incognito, May 10 '20 at 15:39
You are missing a `Promise.all` around your `allProducts.map(...)`. — CherryDT, May 10 '20 at 15:45

Gazihan Alankus · Answer 1 · 2020-05-10T15:57:29.040

With the map, you are getting an array of Promises, for which Promise.all() is a great fit. It completes after all the promises are completed and gives you a list of the results. It is explained further here, as already noted in comments.

In your specific case, this should do it:

const updateAllProducts = async (allProducts) => {
  const temp = await Promise.all(allProducts.map(async (product, index) => {
      const url = product.url;

      const { currentPrice, newSizes } = await scrapeData(url);
      const { currentAvailableSizes, unavailableSizes } = newSizes;

      const long = product.availableSizes.length >= currentAvailableSizes.length ? product.availableSizes : currentAvailableSizes;
      const short = product.availableSizes.length <= currentAvailableSizes.length ? product.availableSizes : currentAvailableSizes;
      const availableSizesDiff = long.filter(x => short.indexOf(Number(x)) === -1);

      product.currentPrice = currentPrice;
      product.priceDiff = 1000;
      product.currentAvailableSizes = currentAvailableSizes;
      product.availableSizesDiff = availableSizesDiff;
  }));

  return temp;
}

While this code may provide a solution to problem, it is highly recommended that you provide additional context regarding why and/or how this code answers the question. Code only answers typically become useless in the long-run because future viewers experiencing similar problems cannot understand the reasoning behind the solution. — palaѕн, May 10 '20 at 15:51
You are right, I neglected doing it since it was already in comments. I'll fix it now. — Gazihan Alankus, May 10 '20 at 15:57

Why is my asynchronous function that calls another asynchronous function returning Promise { } instead of a value?

1 Answers1