Introduce
When working with JavaScript , Promise is a very interesting topic. In this article I will introduce you what is Promise in JS, how it works, how to create and handle Promise .
Concept
JavaScript is a synchronized programming language (Synchoronous), but thanks to the callback function, we can write it as an asynchronous programming language (asynchoronous).
Promise in JavaScript is the same as Promise in the present life, it means a “promise”, so what happens when someone promises you something?
- A promise (Promise) gives you a guarantee that something will be fulfilled, whether or not the person making the promise will fulfill it, or ask a third party. This generally gives you a guarantee, so that you can plan when the promise is fulfilled (or maybe the promise is not fulfilled as expected).
- A promise (Promise) can be fulfilled smoothly (be kept) or uncompleted (broken)
- When a promise is made (be kept), you expect something to be done after the outcome of the promise, and you can plan to do it.
- When a promise (Promise) cannot be fulfilled, you wish to know why it was not fulfilled, when you know the reason, you can plan to handle it.
- When a promise (Promise) is made, we all have a guarantee whether it will be fulfilled smoothly or not, but we have to wait because we do not have to promise what is done immediately, so we have to calculate. is what to do when the promise is fulfilled smoothly, or in the case of a lot of promises, there are many promises.
- You should remember that a promise (Promise) always returns the result as to whether it works smoothly or not, but how long it takes to get the result is unknown. So we have the right to not care about the outcome if it exceeds the time we can wait. For example, if a person doesn’t come back in 10 days, I would assume they don’t keep their promise, if 15 days later they come back, it doesn’t matter because I had other plans.
Promise in JavaScript
There are two important parts to understanding Promise in JavaScript, namely, Promise creation and Promise handling . Although, many times when writing code we use other external libraries to handle promises, understanding the nature of Promise is extremely important. Understanding how the Promise is created is also important for you to work more effectively when using external libraries.
Refer to the JS official website to better understand Promise https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
How to create a Promise
Following is the syntax to create a Promise
1 2 | new Promise( /* executor */ function(resolve, reject) { ... } ); |
Constructor contains 1 executor function . And this executor has two parameters: resolve and reject , also two functions to handle 2 cases: the promise is executed smoothly and the promise is failed.
Now I want to use the word Promise instead of the promise.
Promises are often used to handle asynchronous operations, or may cause blocking code, for example reading / writing files, API calls, DB calls, IO, etc.These asynchronous operations are handled. in the executor function. If it is completed smoothly (success), then the results returned will be handled by quyết function. Similarly if a few errors occur ( failure ), the cause of the error returned will be handled at the reject function .
Let’s try to make a promise.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">var</span> keepsHisWord <span class="token punctuation">;</span> keepsHisWord <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> promise1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> keepsHisWord <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">"The man likes to keep his word"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">reject</span> <span class="token punctuation">(</span> <span class="token string">"The man doesnt want to keep his word"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> promise1 <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Because the above Promise is resolved immediately, we cannot see the initial state of the Promise. So let’s create a Promise that takes a few seconds to resolve. The simplest way is to use setTimeOut
1 2 3 4 5 6 7 8 9 10 | promise2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> message <span class="token punctuation">:</span> <span class="token string">"The man likes to keep his word"</span> <span class="token punctuation">,</span> code <span class="token punctuation">:</span> <span class="token string">"aManKeepsHisWord"</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1000</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> promise2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The above code creates 1 promise, which is resolved after 10 seconds. We can check its status in the period of 0-10s before it is resolved.
After 10 seconds, the promise will be resolved. Both PromiseStatus and PromiseValue values will be upadate. As you can see, the update resolving function shows that we can return a JSON object instead of a simple string.
Now let’s see what a rejected Promise looks like. We will revise the first promise example a bit
1 2 3 4 5 6 7 8 9 10 | keepsHisWord <span class="token operator">=</span> <span class="token boolean">false</span> <span class="token punctuation">;</span> promise3 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> resolve <span class="token punctuation">,</span> reject <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> keepsHisWord <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> <span class="token string">"The man likes to keep his word"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">reject</span> <span class="token punctuation">(</span> <span class="token string">"The man doesn't want to keep his word"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> promise3 <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Because Promise is rejected, Chrome browser will give an error.
As you can see, PromiseStatus can have up to 3 values: pending , resolved and rejected . When the promise is created, PromiseStatus has a value of pending, and PromiseValue is undefined. When a promise is resolved or nhả, we called the promise has been Settled, means complete (smooth or failure is not known). So a promise often goes from pending to concentrated . Now you know how promises are made. Wow.
Conclude
The article is quite long, so let me pause here. Hopefully the article has helped you understand the concept of Promise . In the next article, I will talk more about how we handle Promise , promising to be much more interesting. 
Thanks for reading.
The article is available at: https://medium.com/better-programming/understanding-promises-in-javascript-13d99df067c1