How does variable setting work with await?

Can someone explain to me why this is not working the way I am expecting?

I am expecting the last console.log to run after my functions run, but it is returning empty length string instead of the actual date.

These are the variables I want to set after my function call. Declaring them now so the scope is set globally.

var seasonStart = '';
var seasonID = '';

JavaScript
​x
 
var seasonStart = '';
var seasonID = '';
​

This function gets my json data. I have URL declared above in my code, its returning everything as expected.

async function getCurrentSeasonapi(url) {

  //store response
  const response = await fetch(url);

  //store data in JSON
  var data = await response.json();
  //I tried to set the variables here but it didn't work so I tried using a separate function
  setSeasonInfo(data);
}

JavaScript
 
async function getCurrentSeasonapi(url) {
​
  //store response
  const response = await fetch(url);
​
  //store data in JSON
  var data = await response.json();
  //I tried to set the variables here but it didn't work so I tried using a separate function
  setSeasonInfo(data);
}
​

The function that is called above:

//set current season
function setSeasonInfo(data) {
   seasonStart = data.seasons[0].regularSeasonStartDate;
   seasonID = data.seasons[0].seasonId;
   //this returns the correct date
   console.log(seasonStart);
}

JavaScript
 
//set current season
function setSeasonInfo(data) {
   seasonStart = data.seasons[0].regularSeasonStartDate;
   seasonID = data.seasons[0].seasonId;
   //this returns the correct date
   console.log(seasonStart);
}
​

calling the function, so my variables should be set correctly after this function runs

getCurrentSeasonapi(getCurrentSeasonURL);

//this is returning '' instead of the actual date set in the function
console.log(seasonStart);

JavaScript
 
getCurrentSeasonapi(getCurrentSeasonURL);
​
//this is returning '' instead of the actual date set in the function
console.log(seasonStart);
​

I’m thinking this is a scope issue but I’m not sure why. Here is an example that I was testing the scope out on. This is how I was expecting my code to run:

var test = 1;
async function changeTest() {
    test =100;
}
document.getElementById("first").innerHTML = test + `<br>` + 'Run Function:' + `<br>`;
changeTest();
document.getElementById("first").innerHTML += test

JavaScript
 
var test = 1;
async function changeTest() {
    test =100;
}
document.getElementById("first").innerHTML = test + `<br>` + 'Run Function:' + `<br>`;
changeTest();
document.getElementById("first").innerHTML += test

<html>
<body>
<p> testing JS execution</p>

<div id = 'first'>
</div>


</body>
</html>

JavaScript
 
<html>
<body>
<p> testing JS execution</p>
​
<div id = 'first'>
</div>
​
​
</body>
</html>

Answer

You are not awaiting the call. The example code should have a promise in it.

var testSync = 1;
var testAsync = 1;
async function changeTest() {
  testSync = 100;
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      testAsync = 100;
      resolve();
    }, 300);
  });
}

document.getElementById("first").innerHTML = `${testSync} - ${testAsync} <br> Running <br>`;
changeTest();
document.getElementById("first").innerHTML += `${testSync} - ${testAsync}`

JavaScript
 
var testSync = 1;
var testAsync = 1;
async function changeTest() {
  testSync = 100;
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      testAsync = 100;
      resolve();
    }, 300);
  });
}
​
document.getElementById("first").innerHTML = `${testSync} - ${testAsync} <br> Running <br>`;
changeTest();
document.getElementById("first").innerHTML += `${testSync} - ${testAsync}`

<html>

<body>
  <p> testing JS execution</p>

  <div id='first'>
  </div>


</body>

</html>

JavaScript
 
<html>
​
<body>
  <p> testing JS execution</p>
​
  <div id='first'>
  </div>
​
​
</body>
​
</html>

Now with it awaiting the call

var testSync = 1;
var testAsync = 1;
async function changeTest() {
  testSync = 100;
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      testAsync = 100;
      resolve();
    }, 300);
  });
}


(async function() {
  document.getElementById("first").innerHTML = `${testSync} - ${testAsync} <br> Running <br>`;
  await changeTest();
  document.getElementById("first").innerHTML += `${testSync} - ${testAsync}`
}());

JavaScript
 
var testSync = 1;
var testAsync = 1;
async function changeTest() {
  testSync = 100;
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      testAsync = 100;
      resolve();
    }, 300);
  });
}
​
​
(async function() {
  document.getElementById("first").innerHTML = `${testSync} - ${testAsync} <br> Running <br>`;
  await changeTest();
  document.getElementById("first").innerHTML += `${testSync} - ${testAsync}`
}());

<html>

<body>
  <p> testing JS execution</p>

  <div id='first'>
  </div>


</body>

</html>

JavaScript
 
<html>
​
<body>
  <p> testing JS execution</p>
​
  <div id='first'>
  </div>
​
​
</body>
​
</html>

Advertisement

Answer