Introduction
Javascript is amazing. So amazing in fact that is the most popular languages out there. It's great for beginners and experts alike.
Javascript is so amazing because it has managed to make the web a more interactive and interesting place. It has opened a whole new world of web content, from boring text with a few pictures, into amazing web applications and even games you can play in your browser.
Javascript has evolved over the years to the point where, something that was previously only possible using Flash (remember Flash?) is now possible with zero extensions.
It has, rightfully, become the standard for dynamic content on the web. Browsers would be crazy not to support it, and websites are nothing without it.
The way it works is brilliant. In an HTML page, open a <script> tag et voila! You have the power to create scripts within your browser!
<head>
<title>My amazing website</title>
<script>
var a = 5
var b = a * 2
alert(b)
</script>
</head>
And it works just like any other language, like Java or Python, works! Starting from the top, it would execute the script line by line until it reaches the bottom. And it all happens in the browser whenever your user loads the page. Brilliant stuff!
The problem
The code block above does some pretty basic stuff. It assigns a variable, does some maths to it and then shows a popup alert with the result. It should take milliseconds to run, which means that the user doesn't even realise it happened.
But what about things that take a little longer to complete? Things like getting data from another website? Depending on the data source, it could take from a few seconds to minutes get back a response! How should Javascript respond?
Imagine we do something similar in Python. We want to ask for some data from another website, store it in a variable and we display it to the user:
data = get_data_from("https://api.example.com/data")
print(data)
If we were to run this in a terminal, we would expect it to freeze for a few seconds until the data is given to us and then print that data to the terminal. This is expected behaviour which is OK when it happens in the terminal.
Javascript, however, is a different story. Imagine if it acted the same way as Python whenever we request some data from a remote source:
var data = getDataFrom("https://api.example.com/data")
console.log(data)
The problem is that Javascript works in the browser. If every time it waited for some data to be fetched from some remote source, the browser would freeze! Anything that is based in Javascript would stop working until the data gets back to us. Buttons would stop responding to clicks, any kind of interactivity would stop.
Users would click on buttons expecting something to happen and nothing would. This is awful user experience! Something needed to be done to fix this problem!
Promises to the rescue!
Promises are the solution to the data request problem. It is essentially a way of saying:
"Go get some data from this API. However, I'm not gonna sit here and wait for you because that could take a while and it would freeze my browser"
Promises are also a way of saying:
"Go get some data from this API. I'm going to move on to the next line, BUT once you've got some data back, I want you to do SOMETHING with them".
See this example below:
console.log("Getting some data for you...")
getDataFrom("https://api.example.com/data")
.then((response) => {
console.log(response)
console.log("All done!")
})
console.log("Javascript is great!")
If we run the example above this is what will happen:
- Print "Getting some data for you..."
- Request some data
- Print "Javascript is great"
- Once the data is back, print the data and then print "All done!"
That way your browser doesn't freeze while fetching data. So Javascript is happy, your browser is happy, and most importantly of all, your user is happy.
This was based on this Twitter thread posted a month ago and proven quite popular
Top comments (0)