Как настройка переменных работает с await?

#javascript #async-await #scope

Вопрос:

Может ли кто-нибудь объяснить мне, почему это работает не так, как я ожидаю?

Я ожидаю последнюю консоль.журнал для запуска после запуска моих функций, но он возвращает пустую строку длины вместо фактической даты.

Это переменные, которые я хочу задать после вызова функции. Объявив их сейчас, чтобы область действия была установлена глобально.

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

Эта функция получает мои данные json. У меня есть URL-адрес, объявленный выше в моем коде, он возвращает все, как ожидалось.

 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); }

Функция, которая вызывается выше:

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

вызываю функцию, поэтому мои переменные должны быть установлены правильно после запуска этой функции

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

Я думаю, что это проблема масштаба, но я не уверен, почему. Вот пример, на котором я тестировал область применения. Вот как я ожидал, что мой код будет выполняться:

 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>

1. Это не проблема масштаба. Где await то, где ты делаешь getCurrentSeasonapi(getCurrentSeasonURL)

2. Ваш последний пример с асинхронным тестом не доказывает этого, так как в нем нет ничего асинхронного.

3. Во втором блоке кода (после переменных) Я установил асинхронную функцию getCurrentSeasonapi. В этом блоке есть ожидание

Ответ №1:

Вы не ждете звонка. В примере кода должно быть обещание.

 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>

Теперь с ним в ожидании звонка

 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>

1. В этом есть смысл. Я вижу, где мой пример неверен. Я думаю, мой вопрос был скорее о том, почему мой код работает не так, как в примере? Я попытался применить ваше исправление к моему примеру к моему фактическому коду, но оно все еще возвращается »

2. Так ты и сделал await getCurrentSeasonapi(getCurrentSeasonURL); ?

3. Попробовал еще раз, и теперь он работает. Я думаю, что я изменил что-то еще, когда пытался раньше. Спасибо!!!