At least JavaScript Keeps its Promises :’(
A promise object represents the eventual completion of an asynchronous operation and resulting value. This article aims to break down what that means and what a promise is.
The idea of a promise is just like a promise in real life. You commit to a promise by saying “I promise to write this blog for you” and then there are 3 outcomes of this. That promise is either completed/resolved by me making the blog, I don’t make the blog and I have failed/rejected or I am currently making the blog (pending). The important thing is you can do other things while I am making the blog for you and I’ll send you this blog over when I am are finished. This brings us to asynchronous and synchronous code.
Promises relate to asynchronous JavaScript where the execution of the promises does not block the main thread of code. Just like how when I promise you that I’ll make this blog, you can still do other things while I write this blog. A promise makes writing asynchronous code similar to writing synchronous code, in the sense that instead of immediately returning the final value like a synchronous method would, an asynchronous method returns a promise to send back the value later.
Why and when are Promises used?
An example of when a promise is used is in a fetch() call (which is an asynchronous action) to an API because the data does not return immediately and must be waited for, so we want to run other code to keep our pages fast and responsive. When we use a fetch() we then write “.then(response…” what this really is, is “promise.then”. The “.then” method takes in 2 optional parameters, a function to call when the promise is fulfilled and a function to call when it isn’t. What this means in our case is that the “.then” waits for the promise to resolve and then we call a function based on the resolution of the promise. The “.then” method also returns another promise and when that promise gets fulfilled we then execute that resolution based function. In our example of fetch() we call the response of the fetch() request and then the .json method on that. The “.json()” method called on the response is also an asynchronous task that returns a promise so that’s why it requires chaining “.then”s together because even the first promise value has to have something done to it that returns its own promise, to actually read the data you’re pulling with the fetch() call.
When we use fetch() it returns to us a promise that resolves to the HTTP request. fetch() promises that the async action will be completed and it either completes that action by giving us a response that we can grab the JSON off of or it fails due to some error. Just like in real life we have those same 2 outcomes.
The response of a fetch() request is a stream object, which is the data that’s being pulled from the API. A promise is returned when we call the fetch() because the reading of that data will happen asynchronously.
How does this relate to my JS project?
In my JS project GymReviewer I use multiple fetch() calls to grab or add values to my API. Each fetch call returns a promise to the API that it will retrieve or post that data. My project then uses the resolution to that promise, which is the response to grab the JSON data.
That fetch() in my project will return a promise so that I can still run code that is synchronous. For example, here I call “.postFetchReviews()” which is a function that calls fetch() and sends a POST request with the data I just input in my form. Now that does not happen immediately and I do not want to have to wait for it to do that to run my other code incase it does not happen instantly. So that fetch() sends a promise object that it will post my data and then it is able to finish the code in the main thread (2 lines below) which appends this data to the “gym-reviews-id” div.
To wrap this up, promises are used to write asynchronous code to be similar to synchronous code. We can’t get the return value of calling an asynchronous method instantly because we want other code to run while we wait for that action. To make up for this, asynchronous methods will return to a us a promise that the action we want done will be completed. If the promise is fulfilled then we call a function to use that response and if not then we can call a function to handle that case. This all helps us with our flow of code to help make our apps run faster and smoother. If we get an error from grabbing data from an API we don’t want our app to fall apart entirely, so we have promises so we can keep executing the synchronous code and get back that value later. A promise signifies that eventually the async task the method was assigned will eventually be completed and the resulting value will be given.
