async/await Revisited
1 like410 views
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.
![$riza_profile = get_profile("rizafahmi");
$riza_repos = get_repos($riza_profile[“login"]);
$riza_stars = count_total_stars($riza_repos);](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-26-320.jpg)
![riza_profile = get_profile("rizafahmi")
riza_repos = get_repos(riza_profile[“login"])
riza_stars = count_total_stars(riza_repos)](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-27-320.jpg)
![(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);
}
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-36-320.jpg)
![(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}`);
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-38-320.jpg)
![(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}`);
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-39-320.jpg)
![(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}`);
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-40-320.jpg)
![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);
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-42-320.jpg)
![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);
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-43-320.jpg)
![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);
})();](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-44-320.jpg)
![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));](https://image.slidesharecdn.com/async-180425043226/85/async-await-Revisited-45-320.jpg)
async/await Revisited
- 1. Async/Await Revisited We will talk about callback, promise and async/await.
- 2. Hi, I’m Riza
- 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?
- 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); });
- 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
- 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