Why is async request with await not waiting for the response data?

Question

im not sure why await is not working for me, can someone help me out? I followed some guides and copied it exactly the same but still won't work. I need CardsID array to be filled before calling console.log(CardsID.length)

code:

  "[LL_REPTAG_URLPREFIXFULL /]/api/v2/businessworkspaces?where_workspace_type_id=54";

async function postData() {
  let response = await fetch(url, {
    method: "GET", // *GET, POST, PUT, DELETE, etc.

    headers: {
      "Content-Type": "application/json",
      OTCSTicket: "[LL_REPTAG_OTCSTICKET /]",
    },

    //body: JSON.stringify(data) // body data type must match "Content-Type" header
  });

  return await response.json();
}

//(async function(){

postData().then(function (data) {
  // Log the data to the console
  // You would do something with both sets of data here
  //console.log(data);

  data.results.forEach((element) => {
    CardsID.push(element.data.properties.id);
    console.log("added");
  });
});
//})();

console.log(CardsID.length);
console.log(CardsID);```

result (console):

0
[]
[]
[]
24 added

Where do you expect to see the result? `return await response.json();` should be `return response.json();` because you have already the await for response. In the `postData().then(function (data){}` callback you should fire the console log for `data` which you commented out. The console.logs that placed outside of your functions won't wait for the async functions. — monkey-0001, Oct 23 '21 at 00:24
Your console.log calls should be inside the `.then(function(data) {` block — Kaiido, Oct 23 '21 at 00:48
@Kaiido thank you so much, i was logging outside of 'then' block where it doesnt wait for async function to finish — HamoudyMulti, Oct 23 '21 at 01:00
@monkey-0001 did these modification and it worked! thanks a lot! — HamoudyMulti, Oct 23 '21 at 01:01

score 0 · Answer 1 · answered Oct 23 '21 at 01:00

You are calling the console.logs immediately after the postData() call, which is async (well, promise) and therefore won't wait for the execution to finish. Either you need to place the console.logs inside the then handler, like this:

postData().then(function (data) {
  data.results.forEach((element) => {
    CardsID.push(element.data.properties.id);
    console.log("added");
  });

  console.log(CardsID.length);
  console.log(CardsID);
});

Or (for the sake of consistency), you could make it all async/await, eg.:

async function postData() {
  const response = await fetch(url, {
    method: "GET", // *GET, POST, PUT, DELETE, etc.
    headers: {
      "Content-Type": "application/json",
      OTCSTicket: "[LL_REPTAG_OTCSTICKET /]",
    },
  });
  return await response.json();
}

async function run() {
  const data = await postData();

  const CardsID = [];
  for (const element of data.results) {
    CardID.push(element.data.properties.id);
    console.log("added");
  }

  console.log(CardsID.length);
  console.log(CardsID);
}

run();

score 0 · Answer 2 · answered Oct 23 '21 at 01:14

The problem is that code in the postData().then block is executed asynchronously, after the promise get resolved. The console.log(CardsID.length) statement will run before the then block get executed.

To fix that, you can run the console.log statement in the promise callback.

postData().then(function (data) {

  data.results.forEach((element) => {
    CardsID.push(element.data.properties.id);
    console.log("added");
  });

  // move the console.log statement here
  console.log(CardsID.length);
  console.log(CardsID);
});

score 0 · Answer 3 · answered Oct 23 '21 at 02:25

0

Just remember that your code below the .then block will run before it resolves because Javascript waits to resolve but continues through its synchronous run to execute the code below the any asynchronous code.

answered Oct 23 '21 at 02:25

Drew Hosick

1

Why is async request with await not waiting for the response data?

3 Answers3