{"id":313,"date":"2019-02-28T01:46:32","date_gmt":"2019-02-27T20:16:32","guid":{"rendered":"http:\/\/uitutorials.in\/wp\/?p=313"},"modified":"2020-10-06T13:32:53","modified_gmt":"2020-10-06T08:02:53","slug":"javascript-async-await","status":"publish","type":"post","link":"https:\/\/uitutorials.in\/wp\/javascript-async-await\/","title":{"rendered":"Javascript : Async\/Await"},"content":{"rendered":"

Async\/Await<\/h2>\n

Inside a function marked as async<\/strong>, you are allowed to place the await<\/strong> keyword in front of an expression that returns a Promise<\/strong>. When you do, the execution is paused until the Promise<\/strong> is resolved.<\/p>\n

Before we dive into it, let\u2019s take a moment to familiarize you with the async\/await<\/strong> style. First, async\/await<\/strong> makes the asynchronous code appear and behave like synchronous code. Being that it was built on top of Promises<\/strong>, you could simply see it as a new way of writing synchronous code. Just like Promises<\/strong> themselves, async\/await<\/strong> is equally non-blocking.<\/p>\n

The purpose of async\/await<\/strong> functions is to simplify the behavior of using Promises<\/strong> synchronously and to perform some behavior on a group of Promises<\/strong>. Just as Promises<\/strong> are similar to structured callbacks, one can say that async\/await<\/strong> is similar to combining generators<\/a> and Promises<\/strong>.
\nBasically, there are two keywords involved, async<\/strong> and await<\/strong>, let\u2019s understand them better:<\/p>\n

Async<\/h3>\n

Putting the keyword async<\/strong> before a function tells the function to return a Promise<\/strong>. If the code returns something that is not a Promise<\/strong>, then JavaScript automatically wraps it into a resolved promise with that value e.g when it returns an AsyncFunction<\/strong> object:<\/p>\n

async function oddNumber() {\r\n      return 7;\r\n    }\r\n<\/code><\/pre>\n
Then it\u2019ll return a resolved Promise<\/strong> with the result of 7<\/strong>, however, we can set it to explicitly return a Promise<\/strong> like this:<\/p>\n
async function evenNumber() {\r\n      return Promise.resolve(8);\r\n    }\r\n<\/code><\/pre>\n
Then there\u2019s the second keyword await<\/strong> that makes the function even much better.<\/p>\n
Await<\/h3>\n
The await<\/strong> keyword simply makes JavaScript wait until that Promise<\/strong> settles and then returns its result:<\/p>\n
let result = await promise;<\/code><\/pre>\n
Note that the await<\/strong> keyword only works inside async functions, otherwise you would get a SyntaxError<\/strong>. From the async<\/strong> function above, let\u2019s have an await<\/strong> example that resolves in 2secs.<\/p>\n
async function evenNumber() {\r\n\r\n      let promise = new Promise((resolve, reject) => {\r\n        setTimeout(() => resolve(\"8\"), 2000)\r\n      });\r\n\r\n      let result = await promise; \/\/ pause till the promise resolves \r\n\r\n      alert(result); \/\/ \"8\"\r\n    }\r\n<\/code><\/pre>\n
await<\/strong> simply makes JavaScript wait until the Promise<\/strong> settles, and then go on with the result. Meanwhile, as it waits, the engine carries on with performing other tasks like running scripts and handling events. Thus, no CPU resources will be lost.<\/p>\n
Syntax<\/h2>\n
async function name([param[, param[, ... param]]]) {\r\n       statements\r\n    }<\/code><\/pre>\n
Return Value<\/h2>\n
Now that you have a fair understanding of how async\/await<\/strong> works and it\u2019s syntax, let\u2019s go ahead and dive into more awesome features that will convince you to adopt it:<\/p>\n
Example : 2<\/strong><\/p>\n
\/\/Async Await\r\n\r\n\"use strict\"\r\n\r\nfunction wait10secs(){\r\n    return new Promise((resolve)=>{\r\n        setTimeout(()=>resolve(\"waitOver\"),10000)\r\n    })\r\n}\r\n\r\nasync function callWait(){\r\n    console.log(\"Async Started\")\r\n    let result = await wait10secs(); \/\/stop execution till wait10secs is finished\r\n    console.log(\"Result:\",result)\r\n    console.log(\"Async Finished\")\r\n}\r\n\r\ncallWait()<\/code><\/pre>\n
Example : fetch-reject-promise-and-catch-the-error-if-status-is-not-ok <\/strong>
\nFetch promises only reject with a TypeError when a network error occurs. Since 4xx and 5xx responses aren’t network errors, there’s nothing to catch. You’ll need to throw an error yourself to use Promise#catch.<\/p>\n
A fetch Response conveniently supplies an ok , which tells you whether the request succeeded. Something like this should do the trick:<\/p>\n
\r\nfunction _getSSID() {\r\n  console.log('From _getSSID')\r\n  return new Promise((resolve, reject) => {\r\n    fetch('https:\/\/jsonplaceholder.typicode.com\/posts\/1 jk')\r\n      .then(response => {\r\n        \/\/Handle Error \r\n        if(response.ok){\r\n          return response.json()\r\n        } else {\r\n          throw new Error('Something went wrong');\r\n        }\r\n      })\r\n      \/\/.then(response => {response.json()})\r\n      .then(json => resolve(json.title))\r\n      .catch((error) => { console.log('I am from reject fetch '); reject(error)})\r\n  })\r\n}\r\n\r\nasync function getSSID() {\r\n  try {\r\n    let mySSID = await _getSSID()\r\n    console.log('mySSID :', mySSID)\r\n  } catch (e) {\r\n    console.log(\"Await Error : \", e.message)\r\n  }\r\n}\r\n\r\nconsole.log('Before the Async Await')\r\ngetSSID().catch((e)=>{console.log('Error : ', e)});\r\nconsole.log('After the Async Await')\r\nconsole.log('*********************')\r\n\r\n\/\/OUTPUT\r\n\r\nBefore the Async Await\r\nFrom _getSSID\r\nAfter the Async Await\r\n*********************\r\nI am from reject fetch\r\nAwait Error :\r\nSomething went wrong\r\n<\/code><\/pre>\n
Example 1 – \/\/If we use “async” keyword before the function name, it will return promise <\/h3>\n
async function foo(){\r\n  return 1;\r\n}\r\nconsole.log(foo())<\/code><\/pre>\n
Example 2 <\/h3>\n
async function foo(){\r\n  return 1;\r\n}\r\n\r\nfoo().then(\r\n  (data)=>{console.log(data)\r\n})<\/code><\/pre>\n
Example 3 – <\/br>
\n\/\/ await is similar to using then in promise
\n\/\/ Can not return value from async function
\n<\/h3>\n
async function foo(){\r\n\r\n  let promise = new Promise(function(resolve, reject){\r\n    setTimeout(function(){\r\n      resolve(100)\r\n    }, 1000)\r\n  })\r\n\r\n  let result = await promise;\r\n  \/\/  return result \r\n  console.log(result)\r\n}\r\nconsole.log(foo())<\/code><\/pre>\n
Example 4 <\/h3>\n
async function foo(){\r\n\r\n  let response = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/todos\/1\")\r\n  console.log(\"response : \", response)\r\n\r\n  let result = await response.json();  \r\n  console.log(\"async : \",  result)\r\n}\r\n\r\nfoo()<\/code><\/pre>\n
Example 5 – Alternet to “Ex.5”<\/h3>\n
async function foo(){\r\n\r\n  let response = await fetch(\"https:\/\/jsonplaceholder.typicode.com\/todos\/1\")\r\n  console.log(\"response : \", response)\r\n\r\n  let result = await response.json();  \r\n  console.log(\"async : \",  result)\r\n\r\n  return result\r\n\r\n}\r\n\r\nfoo().then((result)=>{console.log(\"Result : \",result)});<\/code><\/pre>\n
Example 6 – By default “fetch” api will return promise , we have to get through the “then” part<\/h3>\n
fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1')\r\n  .then(response => response.json())\r\n  .then(json => console.log(\" fetch Api : \", json))<\/code><\/pre>\n
Function returns promise object instead of value (async\/await)<\/h3>\n
Declare a function async means that it will return the Promise. To turn the Promise into a value, you have two options.<\/p>\n
The “normal” option is to use then() on it: <\/p>\n
getSSID().then(value => console.log(value));<\/code><\/pre>\n
You can also use await on the function:<\/p>\n
const value = await getSSID();<\/code><\/pre>\n
The catch with using await is it too much be inside of an async function.<\/p>\n
At some point, you’ll have something at the top level, which can either use the first option, or can be a self-calling function like this:<\/p>\n
((async () => {\r\n    const value = await getSSID();\r\n    console.log(value);\r\n})()).catch(console.error)<\/code><\/pre>\n
If you go with that, be sure to have a catch() on that function to catch any otherwise uncaught exceptions.<\/p>\n
You can’t use await at the top-level.<\/p>\n
Different way of doing function call – Nested, Promise, Async\/await<\/h3>\n
var fs = require('fs')\r\nvar myObj = {}\r\n\r\nfs.readFile('file1.txt', function (err, data) {\r\n  if (!err) {\r\n    myObj['data1'] = data.toString()\r\n  }\r\n})\r\n\r\nfs.readFile('file2.txt', function (err, data) {\r\n  if (!err) {\r\n    myObj['data2'] = data.toString()\r\n  }\r\n})\r\n\r\nconsole.log(myObj)\r\n\r\n\/\/2. Nested Callback\r\n\r\nvar fs = require('fs')\r\nvar myObj = {}\r\n\r\nfs.readFile('file1.txt', function (err, data) {\r\n  if (!err) {\r\n    myObj['data1'] = data.toString()\r\n    fs.readFile('file2.txt', function (err, data) {\r\n      if (!err) {\r\n        myObj['data2'] = data.toString()\r\n        console.log(myObj)\r\n      }\r\n    })\r\n  }\r\n})\r\n\r\n\/\/3. Using Promise\r\n\r\nvar fs = require('fs')\r\nvar myObj = {}\r\n\r\nfunction doA() {\r\n  return new Promise(function (resolve, reject)){\r\n    fs.readFile('file1.txt', function (err, data) {\r\n      if (!err) {\r\n        resolve(data.toString())\r\n      }\r\n    })\r\n  }\r\n}\r\n\r\nfunction doA() {\r\n  return new Promise(function (resolve, reject)){\r\n\r\n\r\n    fs.readFile('file2.txt', function (err, data) {\r\n      if (!err) {\r\n        resolve(data.toString())\r\n      }\r\n    })\r\n\r\n  }\r\n}\r\n\r\ndoA().then(function (data) {\r\n  myObj['data1'] = data;\r\n  doB().then(function (data) {\r\n    myObj['data2'] = data2\r\n    console.log(myObj)\r\n  })\r\n})\r\n\r\n\/\/3. Using Async \/ await\r\n\r\nasync function main() {\r\n  myObj['data1'] = await doA();\r\n  myObj['data2'] = await doB();\r\n  console.log(myObj)\r\n}\r\n\r\nmain()\r\n\r\n\/\/OutPut\r\n{ data1: 'This is file 1', data2: 'and thiss if file 2' }\r\n<\/code><\/pre>\n
How to return values from async functions using async-await from function?<\/h3>\n
You cant await something outside async scope. To get expected result you should wrap your console.log into async IIFE i.e<\/p>\n
async function getData() {\r\n  return await axios.get('https:\/\/jsonplaceholder.typicode.com\/posts');\r\n}\r\n\r\n(async () => {\r\n  console.log(await getData())\r\n})()<\/code><\/pre>\n
Since axios returns a promise the async\/await can be omitted for the getData function like so:<\/p>\n
function getData() {\r\n  return axios.get('https:\/\/jsonplaceholder.typicode.com\/posts');\r\n}<\/code><\/pre>\n
and then do same as we did before<\/p>\n
(async () => {\r\n   console.log(await getData())\r\n})()<\/code><\/pre>\n
Ref<\/a><\/p>\n
Reference<\/h3>\n
    \nasync-await – javascript.info<\/a>
    \n    Zellwk<\/a>
    \n    JavaScript async and await in loops<\/a>
    \n    Promises <\/a>
    \n    async-await-vs-promises<\/a>
    \n    Playing with promises and async\/await Code Sample<\/a><\/p>\n
  1. Sitepoint<\/a><\/li>\n
  2. Pusher Syntax<\/a><\/li>\n
  3. Examples<\/a><\/li>\n
  4. Codeburst<\/a><\/li>\n
  5. Codeburst Promise <\/a><\/li>\n
  6. hackernoon<\/a><\/li>\n
  7. Medium<\/a><\/li>\n<\/ol>\n
    Github<\/a><\/h2>\n","protected":false},"excerpt":{"rendered":"
    Async\/Await Inside a function marked as async, you are allowed to place the await keyword in front of an expression that returns a Promise. When you do, the execution is paused until the Promise is resolved. Before we dive into it, let\u2019s take a moment to familiarize you with the<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[98,4],"class_list":["post-313","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-async","tag-javascript","ct-col-2"],"_links":{"self":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":14,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":1840,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/posts\/313\/revisions\/1840"}],"wp:attachment":[{"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uitutorials.in\/wp\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}