Fetch API (Javascript) Works Only When Debugged (Breakpoints)

Question

I am attempting to retrieve JSON from an external source - Open Weather Map and I'm using the Javascript Fetch API to generate the request. I should be returned the current weather at a location via JSON that I can parse from the Open Weather Map API. When I'm debugging my applications and I have breakpoints on the fetch statement the request is sent and I receive a prompt response from the API. After I remove the breakpoints I receive the following message from the Firefox Developer Edition console TypeError: NetworkError when attempting to fetch resource., the Google Chrome console doe not log an error but I can see that a new network request was not generated.

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

Does anyone have any tips or material I can read to better understand what's going on? I've read the Fetch MDN Page and used their example code as the basis of my fetch function.

What does the network tab on the developer tools show for the request? — Heretic Monkey, May 25 '20 at 15:35
@HereticMonkey The network tabs in both Firefox and Chrome show no request has been made it's as if the request never happens. — deadsix, May 25 '20 at 15:57
I see no reason that your network request would fail, unless the API doesn't allow CORS requests (but you should see an error in the network tab and/or the console for that). Try visiting the URL in a browser tab to make sure it works. — Heretic Monkey, May 25 '20 at 17:04
@HereticMonkey I've browsed directly to the API endpoint with both Firefox and Chrome and received an appropriate response in JSON. I ran my code directly in the Firefox console and received this error: `Content Security Policy: The page’s settings blocked the loading of a resource at https://api.openweathermap.org/data/2.5/weather?zip=20003,us&units=imperial&appid=APIKEY (“default-src”).` — deadsix, May 25 '20 at 17:47
@HereticMonkeyThank you for your help in my HTML I was using a form element that wasn't being utilized. I removed the `
` element and replaced it with a `
` and that seemed to clear up my issues. I might have causing a conflict by using the form and the custom JS. — deadsix, May 25 '20 at 17:56

score 0 · Answer 1 · answered May 25 '20 at 16:05

0

I see a fetch, but no async / await, or any other way of waiting for the request to finish.

JS won't wait for your request to finish, it will just continue running. By the moment the request is finished, the execution of that code will be long gone.

There is a similar post right here and also a more detailed explanation of why and how to await a request right here.

If you make breakpoints, you will slow down the execution of the program, and at that moment it will be able to finish the request, having enough time. That's why in the debug mode it works. In production, it will take no time to await anything, until you tell him to.

answered May 25 '20 at 16:05

AlinP25

95
1
11

Thanks for the information, I've changed the code to so that I use async/await and it works in my RunJS environment but doesn't work in Firefox or Chrome. It seems that the request is never fired via Chrome or Firefox. – deadsix May 25 '20 at 16:40
There's no need for async/await, the function passed to `then` will be called when the promise resolves. That's how `fetch` works (with promises). Of course, `parseWeather` doesn't do anything with the data other than set some variables, so there is no UI change to indicate the request has succeeded. – Heretic Monkey May 25 '20 at 17:02

Fetch API (Javascript) Works Only When Debugged (Breakpoints)

1 Answers1