If you are developing an html5/javascript app it could possibly happen, that you need to make more async calls sequentially. It could also often happen, that the output of one call has to be used for another call. If you have many nested calls, you can find them in a state called “pyramid of doom”: the program uses many levels of nested indentation to control access to a function. Error handling and code changes can be very painful! await and async are “syntactic sugar” that allow a developer to write the code as the calls are synchronous and simplifying very much the design and maintainability of the code and human readability. Under the hood the will be still made async. Are you ready to use them?

1. Javascript await / async: no more callback headache ?
Davide Montesin <d@vide.bz>
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

2. Who I am
Freelance senior
software developer
catch & solve
project
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

3. When
async/await are introduced with ECMAScript 2017: June 2017
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

4. Can I use
most browsers today support it already!
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

5. The problem
suppose you want the program you have to follow these typical steps with
javascript
verify auth
get user settings
execute a query to obtain data
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

6. Traditional code
function(user, pass, callback) {
verify_auth(user, pass, function(user_id, error) {
if (error)
callback(null, error)
else
get_settings(user_id, function(settings_id, error) {
if (error)
callback(null, error)
else
query_data(settings_id, function(data, error)) {
if (error)
callback(null, error)
else
callback(data, null);
}
})
}
}
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

7. Pyramid of doom
The readability and maintainability of this code is impressive!
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

8. Promise
The Promise object represents the eventual completion (or failure) of an
asynchronous operation, and its resulting value
function name()
{
return new Promise(function(ok, error)
{
// async code
ok(value);
// or in case of error
error(err);
})
}
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

9. With promise
function(user, pass, callback) {
verify_auth(user, pass)
.then(user_id =>
return get_settings(user_id, function(role_id, error))
.then(role_id =>
return query_data(settings_id, function(data, error))
.then(data => callback(data, null))
.catch(err) => {
callback(null, err)
}
}
}
how complex will it be if I need to add conditional or loop statements!!
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

10. With async / await
really simple!
async function(user, pass, callback) {
try
{
let user_id = await verify_auth(user, pass);
let role_id = await get_role(user_id);
let data = await query_data(role_id);
return data
}
catch (err)
{
throw e; // or handle exception
}
}
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

11. Async / await
it is only syntactic sugar. Synchronous does not mean that the browser
freezes while waiting
advantages:
The resulting code is much more human readable
Error handling is much simpler and it relies on try/catch just like
in any other synchronous code (no different error handling for
async/sync code)
Debugging is much simpler. Setting a breakpoint inside a .then block
will not move to the next .then because it only steps through
synchronous code. But, you can step through await calls as if they
were synchronous calls.
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await

12. Thank you and happy coding!
Davide Montesin <d@vide.bz>
(C) 2018 Davide Montesin <d@vide.bz> - License: CC BY NC ND async / await