Why don't both functions log the same result?

Question

The 1st example logs the resolved value of the promise from the fetch.
The 2nd example logs the pending promise object to the console which I then have to .then((res) => {console.log(res)}) to get the resolved value.

I'm using async functions so I thought both examples were equivalent...?

I have not shown my API key but it works when I use it in the code.

1st Example:

const apiKey = 'somekey';
const city = 'Berlin'

const getWeather = async (cityArg, apiKeyArg) => {
    let city = cityArg;
    let apiKey = apiKeyArg;
    try{
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
        if(response.ok) {
          let jsonResponse = await response.json();
            console.log(jsonResponse);
            //return jsonResponse;
        }
    } catch(error) {
        console.log(error);
    }
}

getWeather(city, apiKey);
//console.log(getWeather(city, apiKey));

2nd Example:

const apiKey = 'somekey';
const city = 'Berlin'

const getWeather = async (cityArg, apiKeyArg) => {
    let city = cityArg;
    let apiKey = apiKeyArg;
    try{
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
        if(response.ok) {
          let jsonResponse = await response.json();
            //console.log(jsonResponse);
            return jsonResponse;
        }
    } catch(error) {
        console.log(error);
    }
}

//getWeather(city, apiKey);
console.log(getWeather(city, apiKey));

Does this answer your question? [Why is my asynchronous function returning Promise { } instead of a value?](https://stackoverflow.com/questions/38884522/why-is-my-asynchronous-function-returning-promise-pending-instead-of-a-val) — Ivar, May 07 '21 at 19:36

Lee Morgan · Accepted Answer · 2021-05-07T20:25:39.697

The reason is that you are awaiting inside that async function, but not in the console.log at the bottom.

Anything outside of that async is going to continue on running as normal. So the console.log(getWeather(city, apiKey) keeps running even though that function has not gotten a response yet. There are a few solutions. First, you could await getWeather, which requires wrapping it in a function.

await function secondFunc(){
    console.log(await getWeather(city, apiKey));
}
secondFunc();

In my opinion, the better way is to use .then. I almost always use it, it is cleaner and more logical to me. Don't forget that you can chain promise statements.

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`)
    .then(response => response.json())
    .then((response)=>{
        console.log(response);
        //Other code to do stuff with the response
    })
    .catch((error)=>{
        console.log(error);
    });

Another way to think of it is that the getWeather is Async, which will wait for a response, and return a promise in the meanwhile. But console.log is not async. So console.log keeps running as usual, but it has only recieved a Promise from getWeather, because that function is not resolved.

Hope that is clear. If you don't quite understand, let me know and I will do my best to explain further.

I think I get it, I'm logging the promise returned from the getWeather function before it has had a chance to resolve? — btew2102, May 07 '21 at 20:43

score 0 · Answer 2 · answered May 07 '21 at 20:59

async functions return promises and since console.log isn't an async function it won't wait for getWeather() to resolve and will just log pending

hope that clears it up

id recommend just using .then()

 //you could do 
getWeather(city,ApiKey).then((response) =>{console.log(response));

hope that was helpful

Why don't both functions log the same result?

2 Answers2