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 😋
