Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>52 Things - Learn Javascript - ES5 Example</title>
    <script>
    // fake http service
      window.users = { alice: { name: 'Alice' } };
      window.gps = { getLoc: function() {} };
      window.handleError = function() {
        console.error("An Error", err);
      };
      window.httpWithCallbacks = {
        get: function(url, opts, handler) {
          if (url === '/checkauth') {
            handler(null);
          }
          else {
            handler(null, { 
              data: [
                'Thing A',
                'Thing B',
                'Thing C'
              ]});
          }
        },
        post: function(url, opt, handler) {
          handler(null, { location: 'Paris, Texas' });
        }
      };
  </script>
</head>
<body>
</body>
</html>
 
// A contrived example of making a set of API calls to get a list of
// things around a user's location. We first check thst the user is signed 
// in, then update the user's location and then retreive a list of things
//
// In the real world, probably no API would behave like this but here we
// are just trying to illustrate the continuous nesting of logic in the 
// code.
//
// Callback trees like this are normal and fundeamental in asynchronous 
// javascript but they grow, and are difficult to read and reason about.
// Here we only have three levels and already the code takes some effort 
// to read.
//
// See how much better this could be: https://jsbin.com/misobet/44/edit?js,console
​
​
// ES5 Asynchronous calls
function postLocation(user, location, callback) {
  httpWithCallbacks.get('/checkauth',
    { user: user },
    function(err, response) {
      if (err) {
        callback(err);
      }
      else {
        httpWithCallbacks.post('/location', 
          { user: user, location: location},
          function(err, response) {
            if (err) {
              user.location = null;
              return callback(err, user);
            }
          
            user.location = response.location;
          
            httpWithCallbacks.get('/location/things', {},
              function(err, response) {
                if (err) {
                  return callback(err);
                }
                user.things = response.data;
                callback(null, user);
            })
          });
      }
  })
};
​
​
// the following code is just calling the function and handling error and output
postLocation(users.alice, gps.getLoc(), function(err, user) {
  if (err) return handleError(err)
  console.clear()
  console.log(user.name + " is in " + user.location)
  console.log("things around the user are:")
  user.things.forEach(function(thing, i) {
    console.log((i+1) + ":> " + thing)
  })
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
stevejpurvespro
0viewers