Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Avoiding Callback Hell with Async.js

20,351 views

Published on

This talk was given at JSSummit 2013. Entitled "Avoiding Callback Hell with Async.js", my talk focused on common pitfalls with asynchronous functions and callbacks in JavaScript, and using the async.js library and its advanced control flows to create cleaner, more manageable code.

Avoiding Callback Hell with Async.js

  1. 1. Avoiding Callback Hell with Async.js C. Aaron Cois, Ph.D. www.codehenge.net
  2. 2. Sup www.codehenge.net @aaroncois github.com/cacois
  3. 3. So, JavaScript?
  4. 4. What’s cool? • Robust event model • Asynchronous programming • Client-side and Server-side
  5. 5. What’s cool? • Robust event model • Asynchronous programming • Client-side and Server-side
  6. 6. What can cause headaches?
  7. 7. Callbacks JavaScript uses callback functions to handle asynchronous control flow
  8. 8. Anatomy of a Callback fs = require('fs'); fs.readFile('f1.txt','utf8',function(err,data){ if (err) { return console.log(err); } console.log(data); });
  9. 9. Anatomy of a Callback fs = require('fs'); fs.readFile('f1.txt','utf8',function(err,data){ if (err) { return console.log(err); } console.log(data); }); Anonymous, inline callback
  10. 10. Anatomy of a Callback fs = require('fs'); fs.readFile('f1.txt','utf8', function(err,data){ if (err) { return console.log(err); } console.log(data); } ); Equivalent formatting
  11. 11. Callback Hell When working with callbacks, nesting can get quite out of hand…
  12. 12. Callback Hell func1(param, function(err, res) { func2(param, function(err, res) { func3(param, function(err, res) { func4(param, function(err, res) { func5(param, function(err, res) { func6(param, function(err, res) { func7(param, function(err, res) { func8(param, function(err, res) { func9(param, function(err, res) { // Do something… }); }); }); }); }); }); }); }); });
  13. 13. Callback Hell func1(param, function(err, res) { func2(param, function(err, res) { func3(param, function(err, res) { func4(param, function(err, res) { func5(param, function(err, res) { func6(param, function(err, res) { func7(param, function(err, res) { func8(param, function(err, res) { func9(param, function(err, res) { // Do something… }); }); }); }); }); }); }); }); });
  14. 14. Best case, this is linear func1 func2 func3 ... func9
  15. 15. But it can branch func1 func2 func2 func3 func3 func3 func3 ... ... ... ... func9 func9 func9 func9
  16. 16. But it can branch … func2(param, function(err, results) { _.each(results, func3(param, function(err, res) { func4(param, function(err, res) { … }); } }); }); func1 func2 func2 func3 func3 func3 func3 ... ... ... ... func9 func9 func9 func9
  17. 17. Some specific challenges • When branching, we can’t know the order of these function calls • If we want parallel execution, we have to do some real gymnastics to get return data back together • Also, scoping becomes a challenge
  18. 18. A more ‘real’ example var db = require('somedatabaseprovider'); //get recent posts http.get('/recentposts', function(req, res) { // open database connection db.openConnection('host', creds,function(err, conn){ res.param['posts'].forEach(post) { conn.query('select * from users where id='+post['user'],function(err,users){ conn.close(); res.send(users[0]); }); } }); });
  19. 19. A more ‘real’ example var db = require('somedatabaseprovider'); //get recent posts http.get('/recentposts', function(req, res) { // open database connection db.openConnection('host', creds,function(err, conn){ res.param['posts'].forEach(post) { conn.query('select * from users where id='+post['user'],function(err,users){ conn.close(); res.send(users[0]); }); } }); });
  20. 20. Solutions • You can make this easier to read by separating anonymous functions • Passing function references instead of anonymous functions helps even more
  21. 21. Inline callback fs = require('fs'); fs.readFile('f1.txt','utf8',function(err,data){ if (err) { return console.log(err); } console.log(data); });
  22. 22. Separate Callback fs = require('fs'); callback = function(err,data){ if (err) { return console.log(err); } console.log(data); } fs.readFile('f1.txt','utf8',callback);
  23. 23. Can turn this: var db = require('somedatabaseprovider'); http.get('/recentposts', function(req, res){ db.openConnection('host', creds, function(err, conn){ res.param['posts'].forEach(post) { conn.query('select * from users where id=' + post['user'],function(err,results){ conn.close(); res.send(results[0]); }); } }); });
  24. 24. …into this var db = require('somedatabaseprovider'); http.get('/recentposts', afterRecentPosts); function afterRecentPosts(req, res) { db.openConnection('host', creds, function(err, conn) { afterDBConnected(res, conn); }); } function afterDBConnected(err, conn) { res.param['posts'].forEach(post) { conn.query('select * from users where id='+post['user'],afterQuery); } } function afterQuery(err, results) { conn.close(); res.send(results[0]); }
  25. 25. Good start! • Callback function separation is a nice aesthetic fix • The code is more readable, and thus more maintainable • But it doesn’t improve your control flow – Branching and parallel execution are still problems
  26. 26. Enter Async.js Async.js provides common patterns for asyncronous code control flow https://github.com/caolan/async BONUS: Also provides some common functional programming paradigms
  27. 27. Client or Server -side My examples will mostly be Node.js code, but Async.js can be used in both client and server side code
  28. 28. Serial/Parallel Execution Run functions in series… Function 1 Function 2 Function 3 Function 4 Function 2 Function 3 Function 4 …or parallel Function 1
  29. 29. Serial/Parallel Functions async.parallel([ function(){ ... }, function(){ ... } ], callback); async.series([ function(){ ... }, function(){ ... } ]);
  30. 30. Serial/Parallel Functions async.parallel([ function(){ ... }, function(){ ... } ], callback); async.series([ function(){ ... }, function(){ ... } ]); Single Callback!
  31. 31. Waterfall Execution Async also provides a flow for serial execution, passing results to successive functions Function 1 args args args Function 2 Function 3 Function 4
  32. 32. Waterfall async.waterfall([ function(){ callback(arg1); }, function(arg1) { callback(ar2,ar3) }, function(arg1, arg2){ callback(“done”) } ], function(err, results){ // results now equals “done” });
  33. 33. Times Times() offers a shortcut to iterating over a function multiple times in parallel async.times(5, function(n, next) { createUser(n,function(err, user { next(err, user); }) }, function(err, users){ // „users‟ now contains 5 users });
  34. 34. Let’s see some code…
  35. 35. Collection Management Functional programming provides some useful tools that are becoming mainstream Specifically, map, reduce, and filter operations are now common in many languages
  36. 36. Map The Map operation calls a given function on each item of a list
  37. 37. Map async.map([„file1‟,„file2‟,„file3‟], funct, callback); async.mapSeries([„file1‟,„file2‟], funct, callback); async.mapLimit([„file1‟,„file2‟,„file3‟], limit, funct, callback);
  38. 38. Reduce The Reduce operation aggregates a list of values into a single result, using a specified aggregation function
  39. 39. Reduce Initial result state async.reduce([val1,val2,…],memo, function(memo,item,cb){ // doStuff }); async.reduceRight([val1,val2],memo, function(memo,item,cb){ // doStuff });
  40. 40. Filter To minimize computational overhead, it’s often helpful to filter data sets to only operate on acceptable values Async.js provides a Filter function to do just this
  41. 41. Filter async.filter([„file1‟,„file2‟,„file3‟], fs.exists, function(results){ // results is now an array // of files that exist });
  42. 42. In Summation Async.js provides: • Powerful asynchronous control flows • Functional programming tools Write clean code, live the dream.
  43. 43. Thanks! Any questions? @aaroncois

×