{"id":1453,"date":"2019-01-14T03:51:11","date_gmt":"2019-01-14T03:51:11","guid":{"rendered":"https:\/\/blog.hassler.ec\/wp\/?p=1453"},"modified":"2019-01-06T22:55:32","modified_gmt":"2019-01-06T22:55:32","slug":"javascript%e2%80%8a-%e2%80%8afrom-callbacks-to-async-await","status":"publish","type":"post","link":"https:\/\/blog.hassler.ec\/wp\/2019\/01\/14\/javascript%e2%80%8a-%e2%80%8afrom-callbacks-to-async-await\/","title":{"rendered":"JavaScript\u200a\u2014\u200afrom callbacks to async\/await"},"content":{"rendered":"
\n

<\/h1>\n<\/div>\n
\n
Thomas Kelley<\/a><\/figcaption><\/figure>\n<\/div>\n
\n

JavaScript is synchronous. This means that it will execute your code block by order after hoisting<\/a>. Before the code executes, var<\/code> and function<\/code>declarations are \u201choisted\u201d to the top of their scope.<\/p>\n

This is an example of a synchronous code:<\/p>\n

console.log('1')<\/pre>\n
console.log('2')<\/pre>\n
console.log('3')<\/pre>\n
This code will reliably log \u201c1 2 3″.<\/p>\n
Asynchronous requests will wait for a timer to finish or a request to respond while the rest of the code continues to execute. Then when the time is right a callback <\/a>will spring these asynchronous requests into action.<\/p>\n
This is an example of an asynchronous code:<\/p>\n
console.log('1')<\/pre>\n
setTimeout(function afterTwoSeconds() {\n  console.log('2')\n}, 2000)<\/pre>\n
console.log('3')<\/pre>\n
This will actually log \u201c1 3 2\u201d, since the \u201c2\u201d is on a setTimeout<\/code> which will only execute, by this example, after two seconds. Your application does not hang waiting for the two seconds to finish. Instead it keeps executing the rest of the code and when the timeout is finished it returns to afterTwoSeconds.<\/p>\n
You may ask \u201cWhy is this useful?\u201d or \u201cHow do I get my async code to become sync?\u201d. Hopefully I can show you the answers.<\/p>\n
\u201cThe problem\u201d<\/strong><\/h3>\n
Let us say our goal is to search for a GitHub user and get all the repositories of that user. The thing is we don\u2019t know the exact name of the user. So we have to list all the users with similar name and their respective repositories.<\/p>\n
Doesn\u2019t need to super fancy, something like this<\/p>\n
\n
\n
<\/div>\n
<\/div>\n<\/div>
So much style, wow! This is the \u201cf<\/a>iddle\u201d<\/figcaption><\/figure>\n
In these examples the request code will use XHR (XMLHttpRequest<\/a>). You can replace it with jQuery $.ajax<\/code> or the more recent native approach called fetch<\/code>. Both will give you the promises approach out of the gate.<\/p>\n
It will be slightly changed depending on your approach but as a starter:<\/p>\n
\/\/ url argument can be something like 'https:\/\/api.github.com\/users\/daspinola\/repos<\/a>'<\/pre>\n
function request(url) {\n  const xhr = new XMLHttpRequest();\n  xhr.timeout = 2000;\n  xhr.onreadystatechange = function(e) {\n    if (xhr.readyState === 4) {\n      if (xhr.status === 200) {\n       \/\/ Code here for the server answer when successful\n      } else {\n       \/\/ Code here for the server answer when not successful\n      }\n    }\n  }\n  xhr.ontimeout = function () {\n    \/\/ Well, it took to long do some code here to handle that\n  }\n  xhr.open('get', url, true)\n  xhr.send();\n}<\/pre>\n
Remember that in these examples the important part is not what the end result of the code is. Instead your goal should be to understand the differences of the approaches and how you can leverage them for your development.<\/p>\n
Callback<\/strong><\/h3>\n
You can save a reference of a function in a variable when using JavaScript. Then you can use them as arguments of another function to execute later. This is our \u201ccallback\u201d.<\/p>\n
One example would be:<\/p>\n
\/\/ Execute the function \"doThis\" with another function as parameter, in this case \"andThenThis\". doThis will execute whatever code it has and when it finishes it should have \"andThenThis\" being executed.<\/pre>\n
doThis(andThenThis)<\/pre>\n
\/\/ Inside of \"doThis\" it's referenced as \"callback\" which is just a variable that is holding the reference to this function<\/pre>\n
function andThenThis() {\n  console.log('and then this')\n}<\/pre>\n
\/\/ You can name it whatever you want, \"callback\" is common approach<\/pre>\n
function doThis(callback) {\n  console.log('this first')\n  \n  \/\/ the '()' is when you are telling your code to execute the function reference else it will just log the reference<\/pre>\n
  callback()\n}<\/pre>\n
Using the callback<\/code> to solve our problem allows us to do something like this to the request<\/code> function we defined earlier:<\/p>\n
function request(url, callback) {\n  const xhr = new XMLHttpRequest();\n  xhr.timeout = 2000;\n  xhr.onreadystatechange = function(e) {\n    if (xhr.readyState === 4) {\n      if (xhr.status === 200) {\n       callback(null, xhr.response)\n      } else {\n       callback(xhr.status, null)\n      }\n    }\n  }\n  xhr.ontimeout = function () {\n   console.log('Timeout')\n  }\n  xhr.open('get', url, true)\n  xhr.send();\n}<\/pre>\n
Our function for the request will now accept a callback<\/code> so that when a request<\/code> is made it will be called in case of error and in case of success.<\/p>\n
const userGet = `https:\/\/api.github.com\/search\/users?page=1&q=daspinola&type=Users`<\/a><\/pre>\n
request(userGet, function handleUsersList(error, users) {\n  if (error) throw error\n  const list = JSON.parse(users).items<\/pre>\n
  list.forEach(function(user) {\n    request(user.repos_url, function handleReposList(err, repos) {\n      if (err) throw err\n      \/\/ Handle the repositories list here\n    })\n  })\n})<\/pre>\n
Breaking this down:<\/p>\n