initLogs 4: Why am I getting [object Promise] when calling an asynchronous function in JavaScript?
Tags: javascript, webdev, beginners, programming
Published: 2022-02-17 17:02:09

---
series: [initLogs]
---

When I learnt about promises and asynchronous coding. The biggest time consumer was when I tried calling an asynchronous function inside a normal function (synchronous code). I was hoping to use the asynchronous function to get the promises which had the values I was looking for. But what I got was `[object Promise]`. The asynchronous function was working fine. But when I called the async function inside a normal function it would return `[object Promise]`. So no promises!


![An image with a woman saying no promises to a man](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwk7hwu0ikl8ubl6b4px.gif)

## Why?

You are getting `[object Promise]` as value because you are calling an asynchronous function inside a synchronous code. This means the synchronous code runs line by line giving no room for asynchronous code to wait and give a response (the promise). You have to wrap an asynchronous function around the asynchronous function you are calling to get the desired result.

![Initial state of the web page with an input and a submit button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mvp17xngjapt1obgw60.png)
  

In the below code, we are creating a function which returns a promise. The below `callOpenWeather()` function uses fetch API to call the OpenWeatherMap api so that we can get a value called `feels_like`. This `feels_like` is a numerical value.

```js

//Async function to fetch the weather info
// using OpenWeatherMap API
const callOpenWeather = async (url) => {
	// Try part when successful return of promise
    try {
		// Calls the API url, parses to JSON, returns
		// feels_like value which is a numerical value.
        let callJson = await fetch(url, {mode: 'cors',});
        let loadJson = await callJson.json();
		return loadJson.main.feels_like;
    
	// Catch part if promise returns an error
	} catch(error) {
        return error;
    }
}
```
## Incorrect way: Asynchronous function inside a synchronous code

Now let's write a function which will interact with the above `callOpenWeather()`. The below code won't work. When you need to call `callOpenWeather()` function which returns a promise, *you cannot* call it inside a synchronous code as shown below. It will return `[object Promise]` as response.

```js
// DOM function to get the data from input and
// use checkWeather function to get the data displayed.
const displayWeather = () => {
    
    const submitButton = document.getElementById('button');
    const inputValue = document.getElementById('search');
    const infoBox = document.getElementById('info-box');

    submitButton.addEventListener('click', () => {
        
        infoBox.style.display = 'grid';
        // Use an api key of openweathermap instead of ${apiKey}
        // to make this code work.
        infoBox.innerText = callOpenWeather(`http://api.openweathermap.org/data/2.5/weather?q=${inputValue.value}&APPID=${apiKey}`);
        infoBox.style.boxShadow = '0 0 2px 0 #d3d3d3';    

    });
}

displayWeather();
```

![Returns object Promise when calling an async function inside synchronous code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frq9vnpoq7d4rvi0snn6.png)


This is because when `infoBox.innerText` calls the `callOpenWeather()` function, the `displayWeather()` function is still a normal synchronous function. This means the lines are executed line by line and does not wait for the value from `callOpenWeather()` which is an asynchronous function. To call `callOpenWeather()` and get the value (a promise), make it asynchronous. You can do this by wrapping `callOpenWeather()` inside an async function using async/await method as shown below. This will make an api call to OpenWeatherMap API and wait for the result so that the result can be set and displayed in `infoBox.innerText`.

## Correct way: Asynchronous function wrapped with an asynchronous function

We are wrapping an async function with the eventlistener for the click event. This will let `callOpenWeather()` function to run properly and wait until it returns a response as provided by the OpenWeatherMap API. The below solution uses async/await method. You can see the usage of `await` keyword which waits for a response from the `callOpenWeather()` function and returns a promise.
 
```js

// DOM function to get the data from input and
// use checkWeather function to display data.
const displayWeather = () => {
    
    const submitButton = document.getElementById('button');
    const inputValue = document.getElementById('search');
    const infoBox = document.getElementById('info-box');
    
    // Users "async" keyword on the click event so as to
    // make the await at `callOpenWeather()` to wait 
    // and give back a response (the promise)
    submitButton.addEventListener('click', async () => {
        
            infoBox.style.display = 'grid';
            // Use an api key of openweathermap instead of ${apiKey}
            // to make this code work.
            infoBox.innerText = await callOpenWeather(`http://api.openweathermap.org/data/2.5/weather?q=${inputValue.value}&APPID=${apiKey}`); 
            infoBox.style.boxShadow = '0 0 2px 0 #d3d3d3';

    });
}

displayWeather();

```


![Final output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohtg5twxtvx5qt5l1nuk.png)

This is how you could get the value from your asynchronous code when you are stuck with `[object Promise]` as your output. This is one of those scenarios where if you think about it, it makes total sense. But our synchronous mind could find it tricky.

---

_Found an error? Have feedback on my writing? DM me on Twitter [@unsungNovelty](https://twitter.com/unsungNovelty)._

_This post was first published at https://www.unsungnovelty.org under the title ["initLogs 4: Why am I getting [object Promise] when calling async function in JavaScript"](https://www.unsungnovelty.org/posts/02/2022/initlogs-4-why-am-i-getting-object-promise-when-calling-async-function-in-javascript/)._