async and await is not working correctly JavaScript

Question

I am trying to use async and await on my react js app. But it's not working correctly.

const handleFinish = async () => {
    const startDateString = startDate.format('YYYY-MM-DDThh:mm');
    const endDateString = endDate.format('YYYY-MM-DDThh:mm');
    const createdString = moment().format('YYYY-MM-DDThh:mm');
    const requestData = [];
    const previousData = [];
    selectedCustomerData.forEach(customer => {
      selectedProductData.forEach(product => {
        previousData.push({
          customer: customer,
          product: product
        });
      });
    });
    await previousData.forEach(async element => {
      const tempStartDate = moment().add(element.customer.leadtime, 'days');
      const apiUrl = '/productprice/?customerid=' + element.customer.customerid + 
                      '&productkey=' + element.product.productkey + 
                      '&isrulendNull=true';
      await api.get(apiUrl).then(response => {
        let newPrice = 0;
        if (priceMethod === 'fixed') {
          newPrice = price;
        } else if (priceMethod === 'specific') {
          newPrice = response.data[0].productpriceusd + price;
        } else if (priceMethod === 'relative') {
          newPrice = response.data[0].productpriceusd % 100.0 * (100.0 + price);
        }
        requestData.push({
          productkey: element.product.productkey,
          productcode: element.product.productcode,
          customerid: element.customer.customerid,
          customerchain: element.customer.customerchain,
          productpriceusd: newPrice,
          rulestart: (tempStartDate > startDate) ? tempStartDate.format('YYYY-MM-DDThh:mm') : startDateString,
          ruleend: endDateString,
          creatorupn: user.data.displayName,
          created: createdString,
          customername: element.customer.customername,
          productdescription: element.product.productdescription,
        });
      });
    });
    console.log(requestData);
    setPricesList(requestData);
  };

I expected the requestData array after foreach. But that console.log does not occur after foreach, it occurs before foreach. That means async and await is not working. What's wrong in my code?

Generally speaking, you dont want to have both await and then() in your code; either stick to one or the other to avoid problems. In this case as Oleksandr pointed out, you're using .foreach which can't be used with async/await — Juanjo Martinez
– Juanjo Martinez, Commented Dec 17, 2020 at 10:40

Paflow · Accepted Answer · 2020-12-17 16:57:42Z

5

I made this mistake quite often myself...

await previousData.forEach(async element => {

this kind of stuff does not synchronize the forEach loop. They are still triggered at the same time, and the await at the beginning of the line does not wait for them. I would use Promise.all or a classic loop like for or while.

edited Dec 17, 2020 at 16:57

answered Dec 17, 2020 at 10:37

Paflow

2,3975 gold badges34 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Potados · Accepted Answer · 2020-12-17 10:41:41Z

Array.forEach() doesn't wait for all elements to be processed in the given async function.

You can use plain for loop like:

const handleFinish = async () => {
    const startDateString = startDate.format('YYYY-MM-DDThh:mm');
    const endDateString = endDate.format('YYYY-MM-DDThh:mm');
    const createdString = moment().format('YYYY-MM-DDThh:mm');
    const requestData = [];
    const previousData = [];
    selectedCustomerData.forEach(customer => {
      selectedProductData.forEach(product => {
        previousData.push({
          customer: customer,
          product: product
        });
      });
    });

    for (const element of previousData) {
      const tempStartDate = moment().add(element.customer.leadtime, 'days');
      const apiUrl = '/productprice/?customerid=' + element.customer.customerid + 
                      '&productkey=' + element.product.productkey + 
                      '&isrulendNull=true';
      await api.get(apiUrl).then(response => {
        let newPrice = 0;
        if (priceMethod === 'fixed') {
          newPrice = price;
        } else if (priceMethod === 'specific') {
          newPrice = response.data[0].productpriceusd + price;
        } else if (priceMethod === 'relative') {
          newPrice = response.data[0].productpriceusd % 100.0 * (100.0 + price);
        }
        requestData.push({
          productkey: element.product.productkey,
          productcode: element.product.productcode,
          customerid: element.customer.customerid,
          customerchain: element.customer.customerchain,
          productpriceusd: newPrice,
          rulestart: (tempStartDate > startDate) ? tempStartDate.format('YYYY-MM-DDThh:mm') : startDateString,
          ruleend: endDateString,
          creatorupn: user.data.displayName,
          created: createdString,
          customername: element.customer.customername,
          productdescription: element.product.productdescription,
        });
      });
    }

    console.log(requestData);
    setPricesList(requestData);
  };

Oleksandr Hrin · Accepted Answer · 2020-12-17 10:35:25Z

0

async/await will not work in forEach loop, you may use for..of loop. here is detailed discussion

answered Dec 17, 2020 at 10:35

Oleksandr Hrin

9361 gold badge12 silver badges14 bronze badges

Comments

user14843447 · Accepted Answer · 2020-12-17 11:02:25Z

0

async/await is not working correctly on forEach.

Please refer below url.

https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404

answered Dec 17, 2020 at 11:02

user14843447

2 Comments

Sabito Over a year ago

Links to external resources are encouraged, but please add context around the link so your fellow users will have some idea what it is and why it’s there. Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline. Answers that are little more than a link may be deleted

Sabito Over a year ago

Note to reviewers: I have not flagged this one.

user14882726 · Accepted Answer · 2020-12-25 07:04:59Z

0

With ES2018, you are able to greatly simplify all of the above answers to:

async function asyncForEach(array, callback) {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
}

answered Dec 25, 2020 at 7:04

user14882726

Collectives™ on Stack Overflow

async and await is not working correctly JavaScript

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related