Fetch API (Javascript)只有在调试时才会工作（断点

Question

我正试图从外部资源--Open Weather Map中检索JSON，我使用Javascript Fetch API来生成请求。我应该通过JSON返回一个位置的当前天气，我可以从Open Weather Map API中解析。当我在调试我的应用程序时，我在fetch语句上设置了断点，请求被发送，我收到了API的提示响应。在我删除断点后，我从Firefox开发者版控制台收到以下消息 TypeError: NetworkError when attempting to fetch resource.Google Chrome 控制台没有记录错误，但我可以看到一个新的网络请求没有生成。

const submitButton = document.querySelector('.submit-zip-button');
const APIKEY = 'REDACTED';

function parseWeather(currentWeather){
    let currentTemp = currentWeather.main.temp;
    let currentWeatherDescription = currentWeather.weather[0].description;
    let weatherIconCode = currentWeather.weather[0].icon;
}

function getWeather(zipNum){
    let weatherData = new Object();

    fetch(`https://api.openweathermap.org/data/2.5/weather?zip=${zipNum},us&units=imperial&appid=${APIKEY}`)
        .then(response => response.json())
        .then(data => {
            console.log(data);
            weatherData = data;
            parseWeather(weatherData);
    });
}

submitButton.addEventListener('click', function(event){
    event.stopPropagation();
    let zipcode = document.querySelector('#zipcode-input');
    zipcode = Number(zipcode.value);
    getWeather(zipcode);

有没有人有任何提示或材料，我可以阅读，以更好地了解这是怎么回事？我已经阅读了 获取MDN页面 并使用他们的示例代码作为我的fetch函数的基础。

Answer 1

我看到一个fetch，但没有async await，或者任何其他方式等待请求完成。

JS不会等待你的请求完成，它只会继续运行。等到请求完成的那一刻，那段代码的执行早就结束了。

有一个类似的帖子 这里 并更详细地解释为什么要等待请求以及如何等待请求 这里.

如果你做了断点，你会减慢程序的执行速度，在那一刻，它将能够完成请求，有足够的时间。这就是为什么在调试模式下它可以工作。在生产中，它将不需要时间来等待任何东西，直到你告诉他。