The document discusses different approaches for handling asynchronous code in JavaScript, including callbacks, promises, and async/await. It provides examples of each approach, such as using callbacks for sequential asynchronous functions, chaining promises together, and using async/await to write asynchronous code that looks synchronous. It also addresses error handling with each approach, noting that while async/await code looks cleaner, error handling can be more complex so different options like try/catch blocks are demonstrated.

1. Async/Await Revisited
We will talk about callback,
promise and async/await.

2. Hi, I’m Riza

3. JavaScript is
asyncrhonous

4. JS waits for nobody

5. JS will move on without
waiting some process to finish.

6. Async Example
• Ajax call
• Access user's webcam
• Resize image

7. How we deal with it?

8. Good Old Callback

9. “Callbacks are func!ons that
you pass as arguments to be
invoked when the callee has
finished its job.”
Callback is...
Eric Elliot

10. getProfile("rizafahmi", (err, profile)
=> {
getRepos(profile.login, (err, repos)
=> {
countTotalStars(repos, (err, stars)
=> {
// count the stars
});
});
});

11. getProfile("rizafahmi", (err, profile)
=> {
getRepos(profile.login, (err, repos)
=> {
countTotalStars(repos, (err, stars)
=> {
// count the stars
});
});
});

12. getProfile("rizafahmi", (err, profile)
=> {
getRepos(profile.login, (err, repos)
=> {
countTotalStars(repos, (err, stars)
=> {
// count the stars
});
});
});

13. const handleCountStars = (err, stars)
=> {
console.log(`Total stars: ${stars}`);
};
const handleRepos = (err, repos)
=> {
countTotalStars(repos, handleCountStars);
};
const handleProfile = (err, profile)
=> {
getRepos(profile.login, handleRepos);
};
getProfile("rizafahmi", handleProfile);

14. const handleCountStars = (err, stars)
=> {
console.log(`Total stars: ${stars}`);
};
const handleRepos = (err, repos)
=> {
countTotalStars(repos, handleCountStars);
};
const handleProfile = (err, profile)
=> {
getRepos(profile.login, handleRepos);
};
getProfile("rizafahmi", handleProfile);

15. const handleCountStars = (err, stars)
=> {
console.log(`Total stars: ${stars}`);
};
const handleRepos = (err, repos)
=> {
countTotalStars(repos, handleCountStars);
};
const handleProfile = (err, profile)
=> {
getRepos(profile.login, handleRepos);
};
getProfile("rizafahmi", handleProfile);

16. const handleCountStars = (err, stars)
=> {
console.log(`Total stars: ${stars}`);
};
const handleRepos = (err, repos)
=> {
countTotalStars(repos, handleCountStars);
};
const handleProfile = (err, profile)
=> {
getRepos(profile.login, handleRepos);
};
getProfile("rizafahmi", handleProfile);

17. Great! But it's hard to read/
write

18. THE Promise

19. Promise is...
“A Promise is a proxy for a value not
necessarily known when the promise
is created. It allows you to
associate handlers with an
asynchronous action's eventual
success value or failure reason.”
Mozilla Develpoer Network

20. Promise is...
A promise is an object that may produce
a single value some time in the future:
either a resolved value, or a reason that
it’s not resolved.
Eric Elliot

21. getProfile("rizafahmi")
.then(profile
=> {
return getRepos(profile.login)})
.then(repos
=> {
return countTotalStars(repos)})
.catch(err
=> {
console.error(err) })

22. getProfile("rizafahmi")
.then(profile
=> {
return getRepos(profile.login)})
.then(repos
=> {
return countTotalStars(repos)})
.catch(err
=> {
console.error(err) })

23. getProfile("rizafahmi")
.then(profile
=> {
return getRepos(profile.login)})
.then(repos
=> {
return countTotalStars(repos)})
.catch(err
=> {
console.error(err) })

24. getProfile("rizafahmi")
.then(profile
=> getRepos(profile.login))
.then(repos
=> countTotalStars(repos))
.catch(err
=> {
console.error(err);
});

25. BUUUUUTTTTTT.....

26. $riza_profile = get_profile("rizafahmi");
$riza_repos = get_repos($riza_profile[“login"]);
$riza_stars = count_total_stars($riza_repos);

27. riza_profile = get_profile("rizafahmi")
riza_repos = get_repos(riza_profile[“login"])
riza_stars = count_total_stars(riza_repos)

28. Async/await

29. (async ()
=> {
const riza_profile = await getProfile("rizafahmi");
const riza_repos = await getRepos(riza_profile.login);
const riza_stars = countTotalStars(riza_repos);
})();

30. (async ()
=> {
const riza_profile = await getProfile("rizafahmi");
const riza_repos = await getRepos(riza_profile.login);
const riza_stars = countTotalStars(riza_repos);
})();

31. const countStars = async ()
=> {
const riza_profile = await getProfile("rizafahmi");
const riza_repos = await getRepos(riza_profile.login);
const riza_stars = countTotalStars(riza_repos);
};
countStars();

32. const countStars = async ()
=> {
const riza_profile = await getProfile("rizafahmi");
const riza_repos = await getRepos(riza_profile.login);
const riza_stars = countTotalStars(riza_repos);
};
countStars();

33. Buuuuuttttt....
Somebody said error handling in
async/await is ugly....

34. Option #1
Make sure errors don't happen
#problemsolved

35. Option #2
try/catch

36. (async ()
=> {
try {
const profile = await getProfile("rizafahmi");
const repos = await getRepos(profile.data.items[0].login);
const stars = countTotalStars(repos.data);
console.log(`Total stars: ${stars}`);
} catch (e) {
console.error(e);
}
})();

37. Option #3
Handle error when you call it

38. (async ()
=> {
const profile = await getProfile("rizafahmi").catch(e
=> console.error(e));
const repos = await getRepos(profile.data.items[0].login).catch(e
=>
console.error(e)
);
const stars = countTotalStars(repos.data);
console.log(`Total stars: ${stars}`);
})();

39. (async ()
=> {
const profile = await getProfile("rizafahmi").catch(e
=> console.error(e));
const repos = await getRepos(profile.data.items[0].login).catch(e
=>
console.error(e)
);
const stars = countTotalStars(repos.data);
console.log(`Total stars: ${stars}`);
})();

40. (async ()
=> {
const profile = await getProfile("rizafahmi").catch(e
=> console.error(e));
const repos = await getRepos(profile.data.items[0].login).catch(e
=>
console.error(e)
);
const stars = countTotalStars(repos.data);
console.log(`Total stars: ${stars}`);
})();

41. Option #4
Higher Order Func!ons

42. const handleError = fn
=> {
return (
...params)
=> {
return fn(
...params).catch(e
=> {
console.error(e);
});
};
};
const safeGetProfile = handleError(getProfile);
(async ()
=> {
const riza = await safeGetProfile("rizafahmi");
console.log(riza.data.items[0].login);
})();

43. const handleError = fn
=> {
return (
...params)
=> {
return fn(
...params).catch(e
=> {
console.error(e);
});
};
};
const safeGetProfile = handleError(getProfile);
(async ()
=> {
const riza = await safeGetProfile("rizafahmi");
console.log(riza.data.items[0].login);
})();

44. const handleError = fn
=> {
return (
...params)
=> {
return fn(
...params).catch(e
=> {
console.error(e);
});
};
};
const safeGetProfile = handleError(getProfile);
(async ()
=> {
const riza = await safeGetProfile("rizafahmi");
console.log(riza.data.items[0].login);
})();

45. const safeGetProfile = handleError(getProfile);
(async ()
=> {
const riza = await safeGetProfile("rizafahmi");
console.log(riza.data.items[0].login);
})();
const handleError = fn
=> (
...params)
=> fn(
...params).catch(console.error(e));

46. “If just using callback you can solving
your problem, why you have push
your self using Promise?!”
Hengki Sihombing, CTO, Co-Founder Urbanhire

48. And I’m done!
github.com/rizafahmi/callback-promise-async-revisited
slideshare.net/rizafahmi
riza@hack!v8.com
ceritanyadeveloper.com