Handwritten Promise(

Promise is used to solve the callback hell, the problem of repeated nesting layer after layer,

Let's look at the basic usage of Promise first.
Insert picture description here
Insert picture description here
Then we can see that Promise is a function or a class, which is then used to instantiate an object.
Here is explained in terms of functions,

First understand a general idea, (simple version)

Define a Promise (fun) function, this function accepts a parameter, and this parameter is a function.
It looks like this (resolve, reject)=>{//Your logic}
is to pass in a function, and then define two functions inside the Promise, namely resolve, reject, and then resolve, and reject to this function, and Execute the function immediately.
Then, it is placed on the prototype chain, that is, Promise.prototype.then, so that the objects of our strength can also be obtained through .then. Then it is also a function defined, accepting two functions, used to deal with the results of success and failure.
This is the general idea.

Next look at the specific implementation:

Rough structure
Insert picture description here
When we instantiate, the passed-in function will be executed immediately, as shown in the figure
Insert picture description here
Insert picture description here

Adhesive

Only when the Promise is in the waiting phase, can the state be changed. Therefore, our resove and reject functions have to be judged when they are in the Pending state when they are defined.
Insert picture description here
This is the realization of resolve and reject.

Then implement then

Because the then function will be called regardless of success or failure, as shown in the figure,
Insert picture description here
you only need to determine whether the current state has achieved resolve() or reject() to change the state to FULFILLEN or REJCT, and then pass in the value of this.value to call the function. .
The basic functions have been implemented, let’s take a look at the effect
Insert picture description here
Insert picture description here

Seems to be invalid?

Take a closer look, good guy, I used it as an arrow function, no wonder this.state is undefined, and the value of typeof is a string, so it should work
Insert picture description here
Insert picture description here
Insert picture description here
properly.

! ! However, there is still a problem

As shown in the figure, Insert picture description here
when we use setTimeout, Insert picture description here
no matter how long it has passed, it will not print "I am a resolve", which is a problem. Insert picture description here
I tried it. At this time Insert picture description here
, it is still pending, because setTimeout is asynchronous, so when we execute a.then, the contents of setTimeout will be executed.
We can try
Insert picture description here

Insert picture description here
Sure enough, it was printed out, proving that our inference was correct, and now we have left to solve this problem.
Publisher subscription mode, save it first and call it when you need it.
It's very simple, that is, when we judge then, if it is pending, it means that it is asynchronous at this time, and resolve or reject has not been executed yet, then we put the function into an array. Put it in and call it where to call it, just call the resolve or reject function, because we execute the resolve function three seconds later, this function can already call the things we put in the array, as shown in the figure and
Insert picture description here
Insert picture description here
then when we three Seconds later, after setTimeOut is finished, when the resolve is executed, a little change is made to the resolve function. Insert picture description here
Will our previous synchronization operation be affected? The answer is no, because during synchronization, there is nothing in the two arrays Yes, so the traversal execution is fine. And because it is synchronized, the state in then will never be pending, so you don't have to worry about it and see the results.
Insert picture description here
That's it.

The above is the realization of the simple version of Promise, the next is the most difficult point, chain call

After our .then above, nothing is returned. This is wrong, because the real Promise returns a promise object when it requires then.

xxxx to be continued

Guess you like

Origin blog.csdn.net/lin_fightin/article/details/114070604
Recommended