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.
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
When we instantiate, the passed-in function will be executed immediately, as shown in the figure
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.
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,
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
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
properly.
! ! However, there is still a problem
As shown in the figure,
when we use setTimeout,
no matter how long it has passed, it will not print "I am a resolve", which is a problem.
I tried it. At this time
, it is still pending, because setTimeout is asynchronous, so when we execute a.then, the contents of setTimeout will be executed.
We can try
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
then when we three Seconds later, after setTimeOut is finished, when the resolve is executed, a little change is made to the resolve function.
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.
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