Learn with Param{ P }

BlogVideos
#react
#css
#javascript
#tech talks

Async functions always return a promise - Lets deep into the Async world

Share:
August 31, 2019🍿 1 min readEdit this post on Github

Async functions are a way to make the asynchrounous operation synchronously by awaiting for the resopnse. Lets see it in the example straight away,

// Normal async function - Returning promise
const getCats = async () => {
  return new Promise((resolve, reject) =>
    setTimeout(
      () =>
        resolve([
          {
            name: 'tiger',
          },
          {
            name: 'jimmy',
          },
        ]),
      2000
    )
  );
};

// Self envoking async function
(async () => {
  console.log(getCats()); // Promise { <pending> }
  const cats = await getCats();
  console.log(cats); // [ { name: 'tiger' }, { name: 'jimmy' } ]
})();

As you can see, we are returning a promise in our example.

Now lets see the next example by returning direct JSON array,

// async function - Returning JSON
const getCatsJson = async () => {
  return [
    {
      name: 'tiger',
    },
    {
      name: 'jimmy',
    },
  ];
};

// Self envoking async function
(async () => {
  console.log(getCatsJson()); // Promise { [ { name: 'tiger' }, { name: 'jimmy' } ] }
  const catsJson = await getCatsJson();
  console.log(catsJson); // [ { name: 'tiger' }, { name: 'jimmy' } ]
})();

As you can check the console log, even though we returned a JSON object from the async function. It was wrapped as a promise. So we still need to await and resolve the promise.

You can always resolve the async without await using promise way,

getCatsJson().then(console.log); // [ { name: 'tiger' }, { name: 'jimmy' } ]

You can check the examples here,

Hope, this helps you to understand how async returns the value by wrapping it as a Promise 😋

Subscribe to my Newsletter

I share best news, articles and projects about JavaScript, React, GraphQL and real world development practices

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile