proper error handling in an asynchronous async/await function

Question

I'm a little bit confused about the right way to handle errors in an async function in javascript.

async function getWeatherAW(woeid) {
        try {
            const result = await fetch(`https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/${woeid}/`);
            const data = await result.json();
            const tomorrow = data.consolidated_weather[1];
            return data;
        } catch(error) {
            console.log(`Error catch-Statement: ${error}`);
        }
    }

const wrongData = 3442;
getWeatherAW(wrongData)
.then(data => {
    console.log(data);
})
.catch(error => {
    console.log(`Error .catch()-Statement: ${error}`);
})

This code ended up giving this result. I'm curious about why even if the catch-statement is triggered a 404 error is printed out to the console..

Would it also be better to not return the result from the async function and instead proceed in the function? I mean the data in the then-block seems to be undefinded when an error occurs in first place.. and if I need to call the function more often, I don't always need to write the then and catch, right?

Thanks in advance!

"*the data in the then-block seems to be undefinded when an error occurs*" - that's because your `try`/`catch` was handling the exception, and then returning `undefined`. You could return something else as well. But having `undefined` doesn't seem very useful, it would require an `if (data !== undefined)` every time, rejecting the promise and handling the error properly seems better. — Bergi, Jan 29 '20 at 21:05
See [this thread](https://stackoverflow.com/questions/44019776/fetch-api-chrome-and-404-errors) about the browser logging errors from fetch. — Mark, Jan 29 '20 at 21:06

score 1 · Accepted Answer · answered Jan 29 '20 at 21:05

1

The console prints a 404 message for all failed requests, regardless of whether the error is handled.

It's a debugging aid to show you that a request failed, not an indication that the failure wasn't handled.

answered Jan 29 '20 at 21:05

SLaks

868,454
176
1,908
1,964

Thanks @SLaks. So there is nothing to worry about, the error is going to be catched? :D – metix Jan 30 '20 at 18:50

brooklynDadCore · Answer 2 · 2020-01-29T21:17:49.530

the error says cannot read property '1' of undefined

async function getWeatherAW(woeid) {
        try {
            const result = await fetch(`https://cors-anywhere.herokuapp.com/https://www.metaweather.com/api/location/${woeid}/`);
            const data = await result.json();
            const tomorrow = data.consolidated_weather[1]; <----- this is undefined
            return data;
        } catch(error) {
            console.log(`Error catch-Statement: ${error}`);
        }
    }

const wrongData = 3442;
getWeatherAW(wrongData)
.then(data => {
    console.log(data);
})
.catch(error => {
    console.log(`Error .catch()-Statement: ${error}`);
})

My guess is tomorrow is initializing before data has been initialized - or that data does not have key consolidate_weather

doing fetch.then() may get the result you want


let tomorrow;
return fetch(url).then((result) => {
     const data = JSON.parse(result);
     tomorrow = data.consolidated_weather[1];
     return data;
}, (error) => {
    console.log(`Error .catch()-Statement: ${error}`);
})

proper error handling in an asynchronous async/await function

2 Answers2