{"id":2121,"date":"2020-11-17T20:16:52","date_gmt":"2020-11-17T12:16:52","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=2121"},"modified":"2020-11-20T13:20:26","modified_gmt":"2020-11-20T05:20:26","slug":"how-to-synchronize-your-javascript-function-calls-with-async-and-await","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-synchronize-your-javascript-function-calls-with-async-and-await\/","title":{"rendered":"How to synchronize your JavaScript function calls with async and await"},"content":{"rendered":"

When ECMAScript 2017 was finalised in June 2017, we get the async\/await<\/code> constructs that simplify synchronous JavaScript function calls.<\/p>\n

Therefore, you may want to use async<\/code> and await<\/code> to keep your JavaScript lean.<\/p>\n

In case you need it, this post shows how you can synchronize your JavaScript function calls with async<\/code> and await<\/code>.<\/p>\n

Understand what async<\/code> do to your JavaScript function<\/h2>\n

First, let us look at the async<\/code> construct. We typically place the async<\/code> construct in front of a JavaScript function:<\/p>\n

\r\nasync function add(x, y) {\r\n    return x + y;\r\n}\r\n<\/pre>\n
When we place the async construct before the add function, the return value is magically wrapped in a JavaScript Promise. Given that, we can call our add<\/code> function in the following way:<\/p>\n
\r\nadd(1, 3).then(alert);\r\n<\/pre>\n
When the JavaScript code is ran by a compatible browser, we will see 4 appearing in an alert window.<\/p>\n
Understand what await<\/code> does to your JavaScript function call<\/h2>\n
When you put await<\/code> before a Promise<\/code>, you make your JavaScript interpreter wait until that Promise is able to return a result.<\/p>\n
For example, in the following JavaScript code segment, the alert<\/code> function will only run after 1 second:<\/p>\n
\r\nasync function showAdditionResult() {\r\n\r\n    promiseToAdd = new Promise(function (resolve, reject) {\r\n        setTimeout(function () { \r\n            resolve(add(1, 3));\r\n        }, 1000)\r\n    });\r\n\r\n    result = await promiseToAdd; \r\n\r\n    alert(result); \r\n\r\n}\r\nshowAdditionResult();\r\n<\/pre>\n
This is because the await<\/code> function will block the interpreter till setTimeout<\/code> function performs the addition. Therefore, the alert<\/code> function will make the browser show an alert window with 4 in the dialog body without fail.<\/p>\n
If we want to achieve similar behaviour without the await<\/code> construct, then we will have to put the alert function within the then()<\/code> function of promiseToAdd<\/code>:<\/p>\n
\r\nfunction showAdditionResult() {\r\n\r\n    promiseToAdd = new Promise(function (resolve, reject) {\r\n        setTimeout(function () { \r\n            resolve(add(1, 3));\r\n        }, 1000)\r\n    });\r\n\r\n    promiseToAdd.then(\r\n        function(result) {\r\n            alert(result); \r\n        }\r\n    ); \r\n\r\n}\r\nshowAdditionResult();\r\n<\/pre>\n
Indeed by comparing both versions, we can see that the await<\/code> construct can help enhance the readability of synchronous JavaScript codes.<\/p>\n
Uncaught SyntaxError: await is only valid in async function<\/h3>\n
If we use await<\/code> in a regular JavaScript function, then the interpreter will throw us a syntax error.<\/p>\n
For example, our JavaScript interpreter will not be able to interpret the following JavaScript function:<\/p>\n
\r\nfunction showAdditionResult() {\r\n\r\n    promiseToAdd = new Promise(function (resolve, reject) {\r\n        setTimeout(function () { \r\n            resolve(add(1, 3));\r\n        }, 1000)\r\n    });\r\n\r\n    result = await promiseToAdd; \r\n\r\n    alert(result); \r\n\r\n}\r\n\r\nshowAdditionResult();\r\n<\/pre>\n
When we attempt to run the above JavaScript codes in a Chrome browser, we will see the following error message in the console:<\/p>\n
\r\nUncaught SyntaxError: await is only valid in async function\r\n<\/pre>\n
Catch errors that may happen<\/h2>\n
In order to see how errors can be caught while we use the await<\/code> function, let's define an async<\/code> function that attempt to fetch<\/a> from a URL:<\/p>\n
\r\nasync function fetchData(url) {\r\n\r\n    response = await fetch(url);\r\n    \r\n    if (response.ok) {\r\n        return response.json();\r\n    }\r\n    else {\r\n        throw new Error(response.status);\r\n    }\r\n}\r\n<\/pre>\n
Since fetch<\/code> only reject on network failure or if anything prevented the request from completing, we explicitly throw an Error<\/code> on HTTP error status.<\/p>\n
Given that, we try to catch Errors throw by the fetchData<\/code> function. When we use the await<\/code> construct, we will be able to catch errors easily. <\/p>\n
In order to do so, we simply wrap the function call in a try-catch block:<\/p>\n
\r\nasync function testFetches() {\r\n    try {\r\n        jsonData = await fetchData('https:\/\/httpbin.org\/headers');\r\n        alert(JSON.stringify(jsonData));\r\n\r\n        jsonData = await fetchData('https:\/\/httpbin.org\/status\/500');\r\n        alert(JSON.stringify(jsonData));    \r\n\r\n    } catch(err) {\r\n        alert(err);\r\n    }\r\n}\r\n\r\ntestFetches();\r\n<\/pre>\n
When we ran the two previous JavaScript code segments, we simulate a scenario to catch Error<\/code>. <\/p>\n
Since a HTTP request<\/a> made to https:\/\/httpbin.org\/headers<\/a> will return a response with 200 OK, we will be able to show an alert with the JSON data from the response body. <\/p>\n
However, when we try to make a HTTP request to https:\/\/httpbin.org\/status\/500<\/a>, an Error will be thrown. When that happens, the browser will show Error: 500<\/strong> in an alert window.<\/p>\n\n