1 Promise core logic implementation
The Promise object is a native javascript object and is a solution for asynchronous programming. It can avoid more callbacks through a callback. Next, it explains its principle and implementation.
The following code is the basic use of Promise:
new Promise((resolve, reject) => {
resolve("success");
reject("fail");
})
(value => { }, reason => { })
From the above code, we can analyze some key points:
- Promise needs to be created
newKeywords, then we can know that Promise is a class; - When executing this class, an executor needs to be passed in, and the executor will be executed immediately;
- There are two parameters in the actuator.
resolveandreject, they are all functions used to change the state in the Promise; - There are three states in Promise, namely: Success
fulfilled,failrejectedand waitingpending, the status can only be frompending—>fulfilled,orpending—>rejected, once the status is determined, it cannot be changed; -
resolveandrejectFunctions are used to change states, whereresolveChange the status tofulfilled，rejectChange the status torejected； -
thenThe method receives two functions as parameters, it needs to judge the state, if the first callback function is successfully called, if the second callback function is failed, andthenThe method is defined in the prototype object. The parameter of the first callback function is the value after success, and the parameter of the second callback function is the reason after failure;
Next, based on the content analyzed above, we will realize our own promise step by step.
First create a class,constructorThe constructor passes in an executor, because the executor needs to be executed immediately, it is called in the constructor.
class MyPromise {
constructor(executor) { // Receive an actuator executor(); // The executor will execute immediately }
}
There are two parameters in the actuatorresolveandreject, they are all functions, so create two arrow functions in the classresolveandreject, in the actuatorexecutorUsed inthisto call them.
Why use arrow function:
Note that we call in PromiseresolveandrejectIt is called directly. If they are written as normal functions, thenthisPoint towindoworundefined, if we write arrow functions, then theirthisIt will point to the instance object of the class.
class MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
resolve = () => {
}
reject = () => {
}
}
resolveandrejectThese two functions are used to change states, so we define states outside the class because they will be used frequently. We define the status by default in the classstatusYes, waitingpending, when calledresolveWhen the status is changed to success, when calledrejectWhen the status changes to failure. And once the state is determined to be unchangeable, we need to determine whether the current state is waiting in the two functions, and return it if it is not.
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
status = PENDING; // The status defaults to pending waiting resolve = () => {
if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success }
reject = () => {
if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure }
}In PromisethenThe method has two parameters. When the state successfully calls the first one and the state fails to call the second one, so it needs to be used internally.ifTo judge the status. When calling a successful or failed function, you need to pass in parameters for it, so we know that the successful value isresolveThe reason for the failure isrejectPassed, so we declare two properties in Promise to store two values.
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value }
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value }
then(successCallback, failCallback) { //Then method has two parameters if ( === FULFILLED) { // The first callback function is successfully called successCallback();
} else if ( === REJECTED) { // Failed to call the second callback function failCallback();
}
}
}At this point, we have implemented the simplest Promise.
2 Add asynchronous logic
The Promise we implemented above actually does not consider the asynchronous situation. For example, in the following code, a successful callback is called after 2 seconds. If it is called at this timethenMethod, then the current state is waitingpending, but we did not judge that the state waspendingwhen the situation.
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("success");
}, 2000);
})
(value => { }, reason => { })
Therefore, inthenIn the method, we should judge the situation when the state is waiting. When the state is waiting, we have no way to call successful or failed callbacks. At this time, we need to store the successful callbacks and failed callbacks.
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = undefined; // Successful callback function failCallback = undefined; // Failed callback function resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value }
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value }
then(successCallback, failCallback) { //Then method has two parameters if ( === FULFILLED) { // The first callback function is successfully called successCallback();
} else if ( === REJECTED) { // Failed to call the second callback function failCallback();
} else { // When the status is waiting, the successful callback and the failed callback are stored. = successCallback;
= failCallback;
}
}
}After storing successful callbacks and failed callbacks, we need toresolveandrejectThe method determines whether there is a successful or failed callback, and if it exists, it will be called.
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = undefined; // Successful callback function failCallback = undefined; // Failed callback function resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value && (); // If the successful callback exists, call }
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value && (); // If the failed callback exists, call }
then(successCallback, failCallback) { //Then method has two parameters if ( === FULFILLED) { // The first callback function is successfully called successCallback();
} else if ( === REJECTED) { // Failed to call the second callback function failCallback();
} else { // When the status is waiting, the successful callback and the failed callback are stored. = successCallback;
= failCallback;
}
}
}This is what we deal with asynchronous situations.
3 then method adds multiple call logic
PromisethenThe method can be called multiple times, and we continue to process this part.
let promise = new Promise((resolve, reject) => { })
(value => { })
(value => { })
(value => { })If it was called multiple timesthenMethods need to consider two situations: synchronization situation and asynchronous situation. If it is a synchronous situation, then you can call the callback function directly. We no longer need to do more processing. If it is an asynchronous situation, then we need to store each callback function.
We werethenIn the method, we also store successful and failed callbacks when we wait, but only one can be stored at a time. Therefore, we need to set the stored container to an array and pass the array'spushThe method stores the callback function.
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = []; // Use array to store successful callback functions failCallback = []; // Use array to store failed callback functions resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value && (); // If the successful callback exists, call }
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value && (); // If the failed callback exists, call }
then(successCallback, failCallback) { //Then method has two parameters if ( === FULFILLED) { // The first callback function is successfully called successCallback();
} else if ( === REJECTED) { // Failed to call the second callback function failCallback();
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
}
}After changing it to an array, then we wereresolveandrejectCallback functions that successfully or failed in the function cannot be used, but callback functions in the array are looped.
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator executor(, ); // The executor will execute immediately }
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = []; // Successful callback function failCallback = []; // Failed callback function resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value while () { // Loop to execute callback functions in array ()(); // Call callback function }
}
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value while () { // Loop execution ()(); // Calling failed callback function }
}
then(successCallback, failCallback) { //Then method has two parameters if ( === FULFILLED) { // The first callback function is successfully called successCallback();
} else if ( === REJECTED) { // Failed to call the second callback function failCallback();
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
}
}4 Chained call then method
PromisethenThe method can be called in chain, nextthenThe parameter of the successful callback function in the method is the previous onethenThe return value of the callback function in the method, that is, in the following code,valueThe value of 1 is 1.
let promise = new Promise((resolve, reject) => { });
(() => { return 1 })
.then(value => { })
.then(() => { })Let's do it firstthenA chained call to the method.thenMethods are methods in Promise. If you want to implement chain calls, then eachthenMethods should return a Promise object so that they can be called. Then we should bethenCreate a Promise object in the method and finally return this object. In addition, we need tothenThe original code in the method is passed into the executor of the newly created object, ensuring that the method is executed immediately after calling it.
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise(() => {
if ( === FULFILLED) { // The first callback function is successfully called successCallback();
} else if ( === REJECTED) { // Failed to call the second callback function failCallback();
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
})
return promise;
}Then the problem of chain calling is solved, and we also need to pass the return value of this callback function to the nextthensuccess callback function. Therefore, we need to get the return value of the successful and failed callback function and pass it through the new promise object'sresolveThe method is passed.
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called let result = successCallback();
resolve(result); // Pass the return value to the next callback function } else if ( === REJECTED) { // Failed to call the second callback function let result = failCallback();
resolve(result);
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
})
return promise;
}If the return value of the last callback function is a Promise object, we need to check the status of the Promise object. If the status is successful, then callresolvePass the state to the next Promise object, and if the state fails, it is calledrejectPass failed information. We need to write a methodresolvePromise, used to judge these logics.
function resolvePromise(result, resolve, reject) {
//Judge whether it is a Promise object by judging whether the result is a MyPromise instance object if (result instanceof MyPromise) { // is a Promise object // Call the then method to view the status of the Promise object // If the first callback function is successfully called, if the second callback function is failed, if the second callback function is called (value => resolve(value), reason => reject(reason));
} else { // If it is normal resolve(result); // Pass the normal value directly }
}Then inthenCalled in the methodresolvePromisefunction:
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called let result = successCallback();
resolvePromise(result, resolve, reject); // Call method } else if ( === REJECTED) { // Failed to call the second callback function let result = failCallback();
resolvePromise(result, resolve, reject);
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
})
return promise;
}We know abovethenThe method can return the Promise object, then if the returned Promise object is stillthenThe Promise object received in the method will form a loop call, and an error should be reported. We're inthenThe return value was obtained in the methodresult, so just need to determine whether it is andpromiseJust the same. We also write this logicresolvePromisein the function.
function resolvePromise(promise, result, resolve, reject) {
if (promise === result) { // If the same, an error is reported reject(new TypeError("Promise object loops"));
return; // Prevent the code from being executed downward }
//Judge whether it is a Promise object by judging whether the result is a MyPromise instance object if (result instanceof MyPromise) { // is a Promise object // Call the then method to view the status of the Promise object // If the first callback function is successfully called, if the second callback function is failed, if the second callback function is called (value => resolve(value), reason => reject(reason));
} else { // If it is normal resolve(result); // Pass the normal value directly }
}thenThe above functions are also called in the method. But in fact we arethenThe method cannot be obtainedpromise, becausepromiseOnly after instantiation can we obtain it. At this time, we can turn the code when the state is successful into asynchronous code, and let the synchronous code be executed first, and then execute the asynchronous code after the execution is completed. We can usesetTimeoutTimer to make it asynchronous code.
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method }, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
})
return promise;
}All codes are as follows:
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator try {
executor(, ); // The executor will execute immediately } catch (e) {
(e); // Pass the error cause to the failed callback function }
}
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = []; // Successful callback function failCallback = []; // Failed callback function resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value // && (); // If the successful callback exists, then call while () { // Loop to execute callback functions in array ()(); // Call callback function }
}
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value // && (); // If the failed callback exists, call while () { // Loop execution ()(); // Calling failed callback function }
}
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method }, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
})
return promise;
}
}
function resolvePromise(promise, result, resolve, reject) {
if (promise === result) { // If the same, an error is reported reject(new TypeError("Promise object loops"));
return; // Prevent the code from being executed downward }
//Judge whether it is a Promise object by judging whether the result is a MyPromise instance object if (result instanceof MyPromise) { // is a Promise object // Call the then method to view the status of the Promise object // If the first callback function is successfully called, if the second callback function is failed, if the second callback function is called (value => resolve(value), reason => reject(reason));
} else { // If it is normal resolve(result); // Pass the normal value directly }
}5 Promise Error Capture
1. Capture the executor error. When the executor is incorrect, execute directlyrejectMethod, this error is actuallythenThe failed callback function in the method output.
constructor(executor) { // Receive an actuator try {
executor(, ); // The executor will execute immediately } catch (e) {
(e); // Pass the error cause to the failed callback function }
}
2. CapturethenError in the callback function in the method. If the currentthenThe callback function in the method is wrong, so it should be in the next onethenThe output in the failed callback function in the method.
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (successCallback);
(failCallback);
}
})
return promise;
}
When the state is waiting, it also needs to be handled errors. When the state is waiting, successful and failed callbacks were originally stored in the array, but there is no way to handle errors. Therefore, we can store a callback function in the array, and the callback function calls a successful or failed function inside.
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (() => { // Add a successful callback function to the array setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
});
(() => { // Add a failed callback function to the array setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
});
}
})
return promise;
}Then inresolveandrejectIn the function, the logic of the successful and failed functions needs to be modified:
// Local code()(); // Call callback function()(); // Calling failed callback function
All codes:
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator try {
executor(, ); // The executor will execute immediately } catch (e) {
(e); // Pass the error cause to the failed callback function }
}
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = []; // Successful callback function failCallback = []; // Failed callback function resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value // && (); // If the successful callback exists, then call while () { // Loop to execute callback functions in array ()(); // Call callback function }
}
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value // && (); // If the failed callback exists, call while () { // Loop execution ()(); // Calling failed callback function }
}
then(successCallback, failCallback) { //Then method has two parameters let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (() => { // Add a successful callback function to the array setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
});
(() => { // Add a failed callback function to the array setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
});
}
})
return promise;
}
}
function resolvePromise(promise, result, resolve, reject) {
if (promise === result) { // If the same, an error is reported reject(new TypeError("Promise object loops"));
return; // Prevent the code from being executed downward }
//Judge whether it is a Promise object by judging whether the result is a MyPromise instance object if (result instanceof MyPromise) { // is a Promise object // Call the then method to view the status of the Promise object // If the first callback function is successfully called, if the second callback function is failed, if the second callback function is called (value => resolve(value), reason => reject(reason));
} else { // If it is normal resolve(result); // Pass the normal value directly }
}6 then method parameter is set to optional
ifthenThere are no parameters in the method, then its parameters should be passed to the subsequentthenin the method.
let p = new Promise((resolve, reject) => { resolve(100) })
().then().then(value => (value)); // 100
Then we canthenIn the method, determine whether the parameters have been passed in, and if they are not directly passed to the next onethenin the method.
then(successCallback, failCallback) { //Then method has two parameters // If no incoming parameters are passed, the value will be returned successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => reason => { throw reason };
let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (() => { // Add a successful callback function to the array setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
});
(() => { // Add a failed callback function to the array setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
});
}
})
return promise;
}7 Implementation
The method receives an array as a parameter, which allows us to obtain the results of the asynchronous code in the order of the call of the asynchronous code, that is, its output result is the order of passing parameters. There are several points to note about this method:
-
The return value of the method is also a Promise object, that is, it can also be called in chainthenmethod; - when
All results in the process are successful, then the result is successful. If one result is failure, then it is failure;
(["a", "b", p1(), p2(), "c"]).then(result => {
// result -> ["a", "b", p1(), p2(), "c"]
})
First, we seeallThe method isPromiseThe class name is called directly, indicating that it is a static method. It accepts an array as an argument and eventually returns aPromiseObject, then we can write the basic framework:
static all(array) {
return new MyPromise((resolve, reject) => {
})
}
Next we should determine whether the passed parameter is a normal value or a Promise object. If it is a normal value, it will be placed directly in the result array. If it is a Promise object, then we will first execute the Promise object, and then put the executed result into the result array. When adding the result to the result array, we define a functionaddDataCome and help us. When the loop is executed, we should callresolveMethod willresultThe result array is passed outside.
static all(array) {
let result = []; // Result array, used to store results function addData(key, value) { // Add the result to the result array result[key] = value;
}
return new MyPromise((resolve, reject) => {
for (let i = 0; i < ; i++) {
let current = array[i]; // Get the current value if (current instanceof MyPromise) { // is a Promise object // If it is a Promise object, we must first execute this object // Call its then method, if the result is successfully added to the array, if the result is failed, pass an error (value => addData(i, value), reason => reject(reason))
} else { // is a normal value addData(i, array[i]); // Normal value directly adds the result to the array }
}
resolve(result); // Pass the result out })
}But there will be a problem here. The for loop is executed in an instant. If there is asynchronous code in the Promise, then the asynchronous code will be executed before it is executed.resolveMethod, then we will not get the results of the asynchronous task in the end. So we can set a counterindex, When there is a result in the result array, let the counter +1, and when the value of the counter is equal to the arrayarrayOnly when the length ofresolvemethod.
static all(array) {
let result = []; // Result array, used to store results let index = 0; // Counter, record whether the execution is completed return new MyPromise((resolve, reject) => {
// The addData method can only be resolved in an array function addData(key, value) { // Add the result to the result array result[key] = value;
index++;
if (index === ) resolve(result);
}
for (let i = 0; i < ; i++) {
let current = array[i]; // Get the current value if (current instanceof MyPromise) { // is a Promise object // If it is a Promise object, we must first execute this object // Call its then method, if the result is successfully added to the array, if the result is failed, pass an error (value => addData(i, value), reason => reject(reason))
} else { // is a normal value addData(i, array[i]); // Normal value directly adds the result to the array }
}
})
}8 Implementation
The method will convert the given value into a Promise object, which means that its return value is a Promise object.
(10).then(value => (value));
The method is a static method, within which the parameter is judged whether the parameter is a Promise object. If yes, it will return intact. If not, create a Promise object, wrap the given value in the Promise object, and finally return.
static resolve(value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}9 Implementation
The parameter is an array, which will return a Promise object. Once a parameter changes its state first, it will directly return the state, that is, to see who executes it faster.
(["a", "b", "c"]).then(value => (value));
The method is a static method, which accepts an array as a parameter, and finally returns a Promise object. The basic framework is as follows:
static race(array) {
return new MyPromise((reslve, reject) => { })
}
Loop through the parameters and return the first successful or failed result.
static race(array) {
return new MyPromise((resolve, reject) => {
for (let i = 0; i < ; i++) {
(array[i]).then(value => resolve(value), reason => reject(reason));
}
})
}
10 Implementing finally methods
finallyThe method accepts a callback function as a parameter, and it has some characteristics:
- Regardless of whether the final state of the Promise object is successful or failed, the callback function in this method will be executed once.
-
finallyThe method can be called in chainthenThe method gets the final result returned by the current Promise object.
let promise = new Promise();
(() => ("finally")).then(value => (value));
First we want to get the state of the Promise object, we can call itthenMethod to obtain the state. Since we have to call the callback function regardless of whether the state is successful or failed, sothenThe callback function is called once in both success and failure in the method. becausefinallyReturns the Promise object,thenThe method also returns the Promise object, so we will directlythenJust return the method.
finally(callBack) {
return (() => {
callBack(); // Called in the successful callback function }, () => {
callBack(); // Called in the failed callback function })
}
Next, we need to return the successful value in the successful callback function and pass the cause of the failure in the failed callback function.
finally(callBack) {
return (value => {
callBack(); // Called in the successful callback function return value; // Return the successful value }, reason => {
callBack(); // Called in the failed callback function throw reason; // Pass the cause of failure })
}
IffinallyThe one behindthenA Promise object is returned, and there is asynchronous code in the object. Then we should wait for the asynchronous code to be executed before continuing to execute the followingthenmethod. So we should judgecallBackWhat is the return value? If it is a normal value, we convert it into a Promise object and wait for its execution to complete. If it is a Promise object, we still wait for its execution to complete.
finally(callBack) {
return (value => {
return (callBack()).then(() => value);
}, reason => {
return (callBack()).then(() => { throw reason });
})
}
11 Implement the catch method
catchMethods are used to handle the situation where the Promise object ends up failing, when we callthenThe method is that it is possible to not pass a failed callback, then the failed callback will becatchmethod captured.
let promise = new Promise(); (value => (value)).catch(reason => (reason));
catchThe method accepts a callback function as an argument and is called internallythenMethod, and do not pass successful callback, only failed callback function, and finallythenJust return the method.
catch(failCallback) {
return (undefined, failCallback);
}
12 All code display
const PENDING = "pending"; // waitconst FULFILLED = "fulfilled"; // successconst REJECTED = "rejected"; // failclass MyPromise {
constructor(executor) { // Receive an actuator try {
executor(, ); // The executor will execute immediately } catch (e) {
(e); // Pass the error cause to the failed callback function }
}
status = PENDING; // The status defaults to pending waiting value = undefined; // Value after success reason = undefined; // Reasons after failure successCallback = []; // Successful callback function failCallback = []; // Failed callback function resolve = value => { // value is the value after success if ( !== PENDING) return; // When the status is not waiting, return directly = FULFILLED; // Change the status to success = value; // Pass the successful value // && (); // If the successful callback exists, then call while () { // Loop to execute callback functions in array ()(); // Call callback function }
}
reject = reason => { // reason is the reason after failure if ( !== PENDING) return; // When the status is not waiting, return directly = REJECTED; // Change status to failure = reason; // Pass the failed value // && (); // If the failed callback exists, call while () { // Loop execution ()(); // Calling failed callback function }
}
then(successCallback, failCallback) { //Then method has two parameters // If no incoming parameters are passed, the value will be returned successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => { throw reason };
let promise = new MyPromise((resolve, reject) => {
if ( === FULFILLED) { // The first callback function is successfully called setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
} else if ( === REJECTED) { // Failed to call the second callback function setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
} else { // When the status is waiting, the successful callback and the failed callback are stored. (() => { // Add a successful callback function to the array setTimeout(() => { // becomes asynchronous code to get promise try {
let result = successCallback();
resolvePromise(promise, result, resolve, reject); // Call method } catch (e) {
reject(e); // Pass the error to the next then }
}, 0)
});
(() => { // Add a failed callback function to the array setTimeout(() => {
try {
let result = failCallback();
resolvePromise(promise, result, resolve, reject);
} catch (e) {
reject(e); // Pass error }
}, 0)
});
}
})
return promise;
}
finally(callBack) {
return (value => {
return (callBack()).then(() => value);
}, reason => {
return (callBack()).then(() => { throw reason });
})
}
catch(failCallback) {
return (undefined, failCallback);
}
static all(array) {
let result = []; // Result array, used to store results let index = 0; // Counter, record whether the execution is completed return new MyPromise((resolve, reject) => {
function addData(key, value) { // Add the result to the result array result[key] = value;
index++;
if (index === ) resolve(result);
}
for (let i = 0; i < ; i++) {
let current = array[i]; // Get the current value if (current instanceof MyPromise) { // is a Promise object // If it is a Promise object, we must first execute this object // Call its then method, if the result is successfully added to the array, if the result is failed, pass an error (value => addData(i, value), reason => reject(reason))
} else { // is a normal value addData(i, array[i]); // Normal value directly adds the result to the array }
}
})
}
static resolve(value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value));
}
static race(array) {
return new MyPromise((resolve, reject) => {
for (let i = 0; i < ; i++) {
(array[i]).then(value => resolve(value), reason => reject(reason));
}
})
}
}
function resolvePromise(promise, result, resolve, reject) {
if (promise === result) { // If the same, an error is reported reject(new TypeError("Promise object loops"));
return; // Prevent the code from being executed downward }
//Judge whether it is a Promise object by judging whether the result is a MyPromise instance object if (result instanceof MyPromise) { // is a Promise object // Call the then method to view the status of the Promise object // If the first callback function is successfully called, if the second callback function is failed, if the second callback function is called (value => resolve(value), reason => reject(reason));
} else { // If it is normal resolve(result); // Pass the normal value directly }
}This is the article about the principles and implementation analysis of JavaScript Promise. 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!