javascript 每5秒调用一次async函数,但会抛出以下错误:'无法读取undefined的属性(阅读' temp')'

tcomlyy6  于 2023-08-02  发布在  Java
关注(0)|答案(2)|浏览(83)

我想做一个天气应用。我想通过使用setInterval()每5秒调用一次async函数来每5秒更新一次天气数据。但是,我得到错误400

const APIkey = 'api_key_value';
const apiURL = 'https://api.openweathermap.org/data/2.5/weather?units=metric'

//Default city set to New York
const input = document.querySelector('input');
input.value = 'New York';

checkWeather();
let intervalID = setInterval(checkWeather, 5000)

const button = document.querySelector('button');

button.addEventListener('click', () => {
    checkWeather();
    clearInterval(intervalID);
    intervalID = setInterval(checkWeather, 5000);
});

input.addEventListener('keyup', (event) => {
    if (event.key === 'Enter') {
        checkWeather();
        clearInterval(intervalID);
        intervalID = setInterval(checkWeather, 5000);
    }
});

async function checkWeather(){
    try {
        const response = await fetch(apiURL + `&q=${input.value}&appid=${APIkey}`)
        const data = await response.json();

        const temp = document.querySelector('.temp');
        temp.textContent = `${data.main.temp}°c`

        const city = document.querySelector('.city');
        city.textContent = data.name;

        const windspeed = document.querySelector('.windspeed');
        windspeed.textContent = `${data.wind.speed} km/h`

        const humidity = document.querySelector('.humid');
        humidity.textContent = `${data.main.humidity} %`

        const clouds = document.querySelector('.cloud');
        clouds.setAttribute('src',`images/${data.weather[0].main.toLowerCase()}.png`)

        input.value = '';
        
        console.log(data.main)
    } catch (error) {
        console.log('Error occured:', error.message);
        const errorMsg = document.querySelector('.error-message');
        errorMsg.style.display = 'block'
    }
}

字符串
我试着把间隔改成一分钟,认为5秒太快了,但它仍然显示错误。

jw5wzhpr

jw5wzhpr1#

根据文档,400错误发生是因为所需的参数没有传递给API,并且根据https://openweathermap.org/current,您需要将latlon传递给您正在调用的API。

k4emjkb1

k4emjkb12#

我无法复制你的400错误,我认为你有一个请求限制(更多信息在这里:https://openweathermap.org/faq)。
如果您使用的是付费版本,请注意共享您的API KEY。
我认为当你需要第三个API时,你必须处理这种错误。验证提取是否成功,然后继续显示一些错误消息。

相关问题