Constructor
First, let’s take a look at how we use promises. This is how we use instantiating objects:
let p1 = new Promise((resolve, reject) => {
let random = (() * 10);
if (random > 4) {
resolve('sucess')
} else {
reject('erro')
}
})
So when we create our own class, we need to consider how to use this parameter.
Let’s take a look. When new Promise is passed, a callback function is passed, and the code in this callback function should be executed immediately.
In this callback function, these two parameters resolve and reject (also callback functions).
So in our constructor, there should be these two functions resolve and reject (no matter what these two functions do for the time being).
We know that promise has three properties:
pending:
fulfilled: corresponding resolve function
rejected: corresponding reject function
And once the state changes, it cannot be changed.
Therefore, our constructor should have attributes representing the current promise state.
We know that no matter whether we use resolve or reject, we will pass a res variable as the result value, so we are using a property to save the result values of resolve and reject.
Finally, we can design a constructor like this:
function Mypromise (config) {
= 'pending';
= ''
let resolve = (data) => {
= 'fulfilled';
= data
}
let reject = (data) => {
= 'rejected';
= data
}
config(resolve, reject)
}
Then and catch methods
Let's first review how to use these two methods:
p1
.then(res => {
(res);
})
.then(res => {
(res);
})
.catch(err => {
(err);
})
We can see in the above code that both then and catch methods accept a callback function
The parameters of this callback function are defined before.
So we can think of doing this:
= function (config) {
if ( == 'fulfilled') {
config()
}
}
= function (config) {
if ( == 'rejected') {
config()
}
}However, this method cannot implement chain calls, it cannot use the then method in conjunction.
But if I want to implement this pattern, we should return an object next in the then method, and this object is normally this.
So can we directly return this? See the following situation.
p1
.then(res => {
(res);
return new Promise((resolve, reject) => {
resolve('1111')
})
})
.then(res => {
(res);
})
.catch(err => {
(err);
})If a new promise is returned under the then method, we cannot directly return this in the then method.
So we should first determine whether then's callback function returns a new object, and if not, return the current then this object.
= function (config) {
if ( == 'fulfilled') {
var res = config()
}
return res || this;
}
= function (config) {
if ( == 'rejected') {
var res = config()
}
return res || this;
}Solve asynchronous problems
The above code seems to be fine, but if I write it like this:
let p2 = new Mypromise((resolve, reject) => {
setTimeout(() => {
reject('p2 resolve')
}, 1000);
})The problem is big, why? Because when I was there, the timer was not finished, so the state of p2 is still pending and will not continue at all.
Here we use a classic solution mode, which can be seen often before I wrote axios and routes.
In the then method, if the current state is pending (this sentence is very important), we save the current callback function (not necessarily one, it may be multiple then, so we use an array to save).
Then when will we use it to save it? Of course, it is used after the timer is over! Then when will the timer end? Of course it's the currentpromiseWhen the state changes，so，We're inresolveandrejectIn the method，To call these methods！ ! !
So we need to modify the constructor:
function Mypromise (config) {
= 'pending';
= '';
= [];
= [];
let resolve = (data) => {
if ( == 'pending') {
= 'fulfilled';
= data
(val => {
val()
})
}
}
let reject = (data) => {
if ( == 'pending') {
= 'rejected';
= data
(val => {
val()
})
}
}
config(resolve, reject);
}Then modify our then and catch methods:
= function (config) {
if ( == 'pending') {
(config);
}
if ( == 'fulfilled') {
var res = config()
}
return res || this;
}
= function (config) {
if ( == 'pending') {
(config)
}
if ( == 'rejected') {
var res = config()
}
return res || this;
}
In this way, we will solve the problem of asynchronousness.
all and race methods
It's still the same, before writing, let's review how it is used:
([p2, p3, p4])
.then(res => {
(res);
})
.catch(err => {
(err);
})
([p2, p3, p4])
.then(res => {
(res);
})
.catch(err => {
(err);
})Then we know that both of them use an array as a parameter, and we don’t consider other situations here, so I just think that the array is full of promise objects. . .
The difference between the two is:
all: When all promises are executed and the status is fulfilled, the promise returned by the all method is fulfilled, otherwise it is rejected.
race: The first promise object that results is the result of the promise put back by race.
Now let’s think about how to implement the all method. After we get the array parameters, we must traverse it.
Then for each element, the then method and the catch method are called.
The then method must have a result array to hold the result values of each promise.
We can use a counter to calculate the number of calls to the then method. If the size of the counter is equal to the length of the array, it proves that all promises are fulfilled and the result array can be returned.
As long as the catch method is called once, it will directly return the result, not many bbs, and return it directly
Finally, remember to return the new promise to o.
= function (arr) {
let result = [];
let count = 0;
let promise = new Mypromise((resolve, reject) => {
for (var i = 0; i < ; i++) {
arr[i]
.then(res => {
(res);
count++;
if (count == ) resolve(result);
})
.catch(err => {
reject(err)
})
}
})
return promise
}If the race method is used, it may be easier to implement. Regardless of the then method of the promise or the catch method triggered, the result will be returned directly:
= function (arr) {
let promise = new Mypromise((resolve, reject) => {
for (var i = 0; i < ; i++) {
arr[i]
.then(res => {
resolve(res);
})
.catch(err => {
reject(err)
})
}
})
return promise
}This is the end of this article about the detailed explanation of the JavaScript implementation of Promise process. For more related JS Promise content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!