Promise handwriting
As a must-have question for interviews, the handwriting of Promise is also a must-ask question for interviewers, so we must understand Promise thoroughly.
frame
(function(window) { = function (onResolved, onRejected) {} = function (onRejected) {} function MyPromise(executor){ function resolve(value){} function reject(error){} try{ executor(resolve, reject) }catch(error){ reject(error) } } = MyPromise }(window))
Complete code
(function (window) { //mount the .then and .catch methods on the MyPromise prototype = function (onResolved, onRejected) {//.then accepts two callback functions, resolved state and rejected state // .then returns a promise object return new MyPromise((resolve, reject) => { let self = this; if ( === 'pending') {//If MyPromise status is pending, push the two callback functions into the callback array and wait ({ onResolved, onRejected }) } else if ( === 'resolved') { //If MyPromise status is resolved, call onResolved directly setTimeout(() => { //Check whether the callback in .then returns the return value const result = onResolved() //If there is no return return value, the default return promise object is returned if (result instanceof MyPromise) { ((res => resolve(res), err => reject(err))) return result } else { resolve(result) } }) } else { setTimeout(() => { onResolved() }) } }) } = function (onRejected) { //.catch accepts a callback function if ( === 'pending') { // Put the callback function into the callbacks array ({ onRejected }) } else if ( === 'rejected') { setTimeout(() => { onRejected() }) } } // MyPromise constructor accepts an execution function function MyPromise(executor) { const self = this; = undefined; = [] //Set the initial state of the promise object to pending = 'pending' //The first parameter of the execution function is the resolve callback function resolve(value) { //If the status is not pending, return directly if ( !== 'pending') { return } // Execute resolve and change the state of the promise object = 'resolved'; // Get the value in resolve = value; // Call the callback function in callbacks if ( > 0) { setTimeout(() => { (callbacksObj => { (value) }); }) } } // The second parameter of the execution function is the rejecr callback function reject(error) { //If the status is not pending, return directly if ( !== 'pending') { return } // Execute resolve and change the state of the promise object = 'rejected'; // Get the value in resolve = error; // Call the callback function in callbacks if ( > 0) { setTimeout(() => { (callbacksObj => { (value) }); }) } } //Catch errors using try catch try { // Execute the function within the try executor(resolve, reject) } catch (error) { // If an error occurs, reject is executed by default reject(error); } } = MyPromise }(window))
test
resolve
let MyPromiseTest = new MyPromise((resolve, reject) => { resolve('resolve') }) (res => { (res); }) // resolve
let MyPromiseTest = new MyPromise((resolve, reject) => { resolve('resolve'); }) (res => { (res); }) .then(res => { ('I am.then()The one behind.then()'); }) // resolve // I'm the .then() after .then()
reject
let MyPromiseTest = new MyPromise((resolve, reject) => { reject('reject') }) (err => { (err); }) // reject
let MyPromiseTest = new MyPromise((resolve, reject) => { (a); }) (err => { ('Catch error' + ':' + err); }) // Catch errors:ReferenceError: a is not defined
This is the article about the JavaScript interview that requires the implementation of handwritten Promise. This is the end of this article. For more related JavaScript handwritten Promise content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!