ES6 Promises

[00:00:00]
>> Maximiliano Firtman: It's time to talk about another big topic, mostly in JavaScript development, that is asynchronous programming. So, and ESX was actually a big deal here. So we are going to start talking about promises. So, actually, promises was a design pattern before ES6, but from ES6, it was a part of the language.

[00:00:24]
So it's now part of the language. So we will do a recap. So that's ES6, but then we will get into new syntax after ES6. Async/Await is probably the most famous one and maybe you have used that, but that's from a year after ES6. But we'll talk about promises improvements that appeared after that.

[00:00:44]
Asynchronous iterations, so these are iterators that can also be used with async await. Top-level await, actually, that was the last thing that was added in the platform. And then some advanced situations around async programming. So, including atomics and SharedArrayBuffer. So these advanced topics are there now, so we won't get into those details.

[00:01:16]
This is actually, I'm not sure if you have ever played with SharedArrayBuffer, that's what actually something that's for many years, almost eight years, they disappeared from browsers because it was a security issue. Actually, a SharedArrayBuffer is a way that the web app has to share data, like a piece of memory, with other tabs or Windows from the same origin, but that they have their own context.

[00:01:44]
For example, you have two Gmail tabs open. Instead of creating variables or data on each tab, you can share data, okay? But there was a security problem with that. So then the browsers removed that, it came back again a few years ago. But anyway, if you get into that part, yes, we'll give you some newer stuff.

[00:02:14]
Okay, but we won't get into those advanced parts. So before promises, it was pretty common in the web space to use callbacks. I'm not sure if you have heard about the callback hell mentioned, where callbacks are really difficult to follow, mostly when you have a callback, but when that's finished, you have another callback.

[00:02:36]
Callback is when you ask for something to be done, for example, in some seconds. So I have doInSeconds, where I pass the amount of seconds, and then I pass a function, and it will do something in two seconds. So after two seconds, I'm getting an alert, okay? Which is okay, it works.

[00:02:54]
And it works with a callback, okay? Well, the idea is that with promises, we have a new design pattern. So in ESX, we have this idea of a promise. What is the promise? Well, the idea is similar when you go to Starbucks. So when you go to Starbucks, well, if you use the app, you're making not part of the process that I was mentioned to preorder.

[00:03:20]
But let's say that you go like ten years ago with your credit card, and you ask for your Americano, this is Americano. So you go and you ask for Americano, you put the credit card. So the credit card is the input, but you don't receive the Americano. So, I mean, I'm paying by cash and I'm not receiving the Americano.

[00:03:42]
I'm receiving a promise of an Americano, that's the idea of a promise. You are promising that you will make an Americano for me and you will give me that Americano later, that's the concept of a promise. It's something that you will give me later. And with every promise, we know that not every promise can be fulfilled.

[00:04:05]
Maybe the machine is broken, or the machine brokes when they're trying to make the Americano, and they cannot fulfill my promise. So something like that works with JavaScript. So, in this case, function doInSeconds, instead of executing setTimeout, it's going to return a promise. And the promise always works in the same way, it has a function as an argument, this is a promise constructor, as an action where you can resolve or reject the promise.

[00:04:39]
So I can fulfill, I can resolve the promise or not. So then, I can do something inside such as setTimeout, or whatever. And at some point, I should resolve the promise, okay, that's the idea of a promise. Forget about the alert for a second, let's make a simple example.

[00:05:02]
So for example, I will say, giveMeHello, okay? So doesn't mean anything like this. So the Promise will just say something like, okay, hello. So I will resolve, saying you, hello, I'm resolving with the Americano. Okay, so that hello is the Americano, is what you ask for. If for some reason I cannot give you that, I will reject, and the reject can send an error or nothing, okay?

[00:05:36]
Like I can't, wherever. So you reject or resolve, when you're calling that promise, you say, give me hello. But giveMeHello is not actually, so if you do console.log(giveMeHello), it's not what you're expecting. So, because, by the way, it says, cannot be invoked without the new, because this is a constructor, so I need to create a new promise, which was okay.

[00:06:04]
But it's returning me the promise. So it's like when you go to Starbucks and you pay for your coffee, you're getting a receipt, not the coffee, okay? So the promise, you're getting the promise, can be a visual promise, a verbal promise, like with your name, I will call you later, or it can be a physical receipt, well, that's the promise.

[00:06:24]
It's not yet the data, it's a promise. So, I can store that in a variable if I want, but that's a promise, not the data. I need to wait for the data, and for that, we use the then function, and then the then receive sector callback, and then we get the message actually here.

[00:06:44]
So we can do a console log of the message, I can pass console log as an argument without the arrow function, but anyway something like that, okay? Or I can make an alert or whatever, wherever you wanna do with that message. So, yeah, in this case, it's giving me a hello.

[00:07:03]
But I'm using the promise technique, the promise design pattern, okay, make sense? Now, going back to the, I'm clicking on solution here. This is the example of doInSeconds, but we promise, so I'm calling doInSeconds, 2 seconds. And when I get in the value and make it an alert of the value.

[00:07:27]
And then I also have a catch, the promise has a catch, where you can catch the promise, and then this is a recap, right, really quickly on promises. You can see we have the same pattern here, I'm creating a new promise with resolve and reject. And then I'm resolving the promise at some point in the future, okay?

[00:07:50]
So then, I'm setting the alert and I'm getting the alert after two seconds. It gets more complicated because you can change promises, one promise after another promise and so on, but that's kind of the basic idea of promises that appear in ES6, just a recap.