It’s not that hard! To understand `Promise` in javascript

The content of this article is very suitable for Javascript beginners. It will be described in simple and easy-to-understand language, so you don’t have to worry about not understanding it.

Promise, why do you exist?

Promise is an indispensable knowledge point when learning modern Javascript language. Many people feel confused when reading it. The main reason can be summarized in one sentence:

The code is no longer executed from top to bottom.

Normally, the code we write is executed sequentially, for example, we write a code that counts from 1 to 3.

console.log(1)
console.log(2)
console.log(3)

Press F12 to open the console of our browser, copy the above code into it, press Enter, and you can see that the numbers 1 to 3 are printed out in order.

1
2
3

Now, if we have a requirement that the order of the codes cannot be changed, but the order of the final printouts must be independent of the order of the codes, can we do this?

Let's imagine that if 1, 2, and 3 are printed by three people respectively, then it will be very simple. We just need to tell them the task of printing numbers at the same time, and the order of the printouts will only be related to the execution time of the tasks.

Promise, the magical effect

So, how do we assign the printing task to three people? This is where is used Promise. By creating a new Promise object, we can assign a section of code to a new "process" instead of executing it on the current "process". Note that the "process" here is not the same as the operating system process we often talk about, but is just an abstract concept, representing a virtual unit that executes code in sequence.

Promise, Assembly Instructions

As we said just now, Promise it can be regarded as a new "process", so if we want it to execute any code, we can wrap it in a function and give it to it. In this way, the code will not be executed immediately.

Promise also provides us with two functions, one is resolve and the other is reject, which we can call when the task is completed and failed respectively. These two functions are passed to Promise's internal of as parameters. So, we can assemble one like this:

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)

Here we use setTimeout to simulate a time-consuming task. In real scenarios, this task may be reading a file, requesting a network interface, or waiting for user input. When the task is completed, we call resolvethe function to indicate that the task has been completed.

Complete code

Then, we follow the same method, and Promise when we assemble the other two, we only need to provide them with different print numbers and the time required for the task. Finally, the complete code is like this, you can try to copy it into the console and give it a try.

Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(1)
      resolve()
    }, 300)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(2)
      resolve()
    }, 200)
  }
)
new Promise(
  (resolve, _reject) => {
    setTimeout(() => {
      console.log(3)
      resolve()
    }, 100)
  }
)

Finally, the order in which the numbers are printed is related to the execution time of the tasks:

3
2
1

Promise, Concurrency Model

Concurrent programming is about how to simulate the execution of a large number of tasks simultaneously on a limited number of CPU cores. Promise in Javascript provides a convenient and fast way of concurrent programming, as well as a set of specifications for handling return values ​​and error values. After understanding and becoming familiar with this specification, we can greatly improve the efficiency of handling concurrent tasks.