javascript - 等待 OpenWeather 函数，然后运行另一个函数

Question

这个问题已经有答案了:

What is the scope of variables in JavaScript? (27 个回答)

已关闭 3 年前。

我正在构建一个时间和天气应用程序。我有两个功能。 showtime() 正在等待 getWeather()。常量在 getWeather() 中记录得很好，但是当我尝试在 showtime() 中检索相同的常量时，我​​得到了未定义的信息... Fiddle .

<div class="weekday"></div>

const weekday = document.querySelector('.weekday');
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thur','Fri', 'Sat', 'Sun'];

setInterval(() => {
const d = new Date();
const day = days[d.getDay()];

    async function showtime() {
    await getWeather();
    console.log(sunriseTime); // returns undefined
    console.log(day) // logs fine, returns Wednesday. 
        weekday.innerHTML = day + ', Sunrise at: ' + sunriseTime;
    }
    showtime();
}, 1000);

// 

const openweather_api = "https://api.openweathermap.org/exampleexample";

async function getWeather() {
    console.log('run weather function first')
    const response = await fetch(openweather_api);  
    const json = await response.json();

    const sunriseTime = `${json.sys.sunrise}` // logs sunrise time in seconds. 
    }

getWeather(); // runs fine and retrieves values from Open Weather Json.

Answer 1

这是因为变量范围。

您在 getWeather 的函数范围内声明了变量 sunrisetime

所以，不能在外层作用域中调用

const b = 2;
console.log(a);// undefined because it is not declared in this scope

const foo = () => {
   const a = 1;

   console.log(a);// 1
   console.log(b);// 2

}

/*************************************************************************/
// a solution to this problem can be
let c;

const getInnerVariable = VAR => {
   return VAR;
}

const foo = () => {
   const a = 1;

   console.log(a);// 1
  c =  getIneerVariable(a);

}

了解有关 JS 中变量提升的更多信息 Here