Do you promise to use asynchronous Javascript?

This week in Flatiron bootcamp, we went straight into Javascript and never looked back. By day three of the week, we were already learning how to use fetch(). But before we go into fetch and all its wonderful glory. We first need to know the the basics of Javascript.

Javascript uses a call stack which is like an interpreter, this call stack essentially keeps track of what functions are being run and what functions are called within that function. So when a function is called the interpreter adds it to the call stack and starts executing whatever code is inside that function. When that function is finished, it is taken off the stack and resumes executing where it left off in the code.

Since Javascript, is a single threaded programming language, meaning one thing can happen at a time. This could be a problem, why? Let’s just say you are like our good friend in bootcamp Michael, he lives in Montana and has been having the worst trouble with his internet connection. Every other day, he loses internet, which you can manage is annoying enough but especially when you have to be on your computer coding for about 9+ hours a day. Anyways, Michael is trying to hop on his Flatiron school website but his internet is acting up as per usual, because Javascript can only handle one function execution at a time, he is waiting and waiting and waiting for everything on his page to load and his server to fetch all the necessary data and send it back to the browser. Even the HTML and CSS won’t load because of his poor connection, the call stack is stuck trying to run through a particular function or maybe fetching data and nothing else will load after it, until that piece of code is resolved. Below is an example of what a call stack would look like …

courtesy of The Event Loop and Call Stack in Javascript by Laura Nickerson

But we have a solution for all this… something called asynchronous Javascript which helps us to perform long network requests and not block the main thread of the programming language. To handle being a multitasker in code, we use something called Promises.

When you make a Promise, you define a process which you need to execute and the success/failure case of that process. This is the only parameter of the Promise constructor, an “executor” function that takes two functions: “Resolve” (sometimes called “Fulfill”) and “Reject”. After you’ve instantiated a promise, the executor function will run and the status of the promise will be ‘Pending’ until either Resolve or Reject is executed. After you’ve instantiated a promise, the executor function will run and the status of the promise will be ‘Pending’ until either Resolve or Reject is executed. It looks like this:

Promises help us avoid callback hell (which you can read about at http://callbackhell.com/) and we can then chain on many promises with the .then() method. Each task that’s being chained can only start as soon as the previous task has completed, controlled by the .thens of the chain. This chain is set up to allow the callback functions to return a promise. Anything returned from the then method either becomes a resolved promise or a rejected promise that will be handled by a .catch block. The then() method is especially useful when fetching data which is what we learned this week.

Using the fetch() method provides us an easy way to gather resources and data asynchronously across the network. The fetch function will take in one argument, which is of course the path to the data/resource you want to fetch. Fetch returns a promise that resolves to the response of the request. We can then use the then() method in order to attach a callback once our promise has been fulfilled.

With fetch function and then method we can call the json() method on the response of our request which will provide us the response in json format. (JSON uses human-readable text to store data in the form of a key/value pair). The json method will return a promise, so you guessed it we will need to create a promise chain! We will pass the value we receive from the first Promise into our chain in order to do some operations. Below is an example of a basic fetch request:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Enjoy your fetching and remember to always keep your promises!