Blog
#react
#css
#javascript
#mongodb

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

August 31, 2019🍿 1 min readEdit this post on Github
Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

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 invoking 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 invoking 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 😋

Wanna become a Pro Engineer!

Weekly, practical advice on how to become a better Engineer. Read by 210+ engineers, managers, and founders.

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile