This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

The introduction to Promise and the use of related methods, the key issues of Promise, the core principles of handwritten Promise (I), and the need for children’s shoes please move on. This article writes down the core principles of promise-related methods:

1, write promise.prototype.then ()

We know that the THEN method returns a new Promise instance by specifying the resolve and Reject callbacks, respectively.

(If you don’t know, check out the previous article on Getting Started with Promise and how to use related methods.)

What are the operations inside the THEN method?

  1. The arguments received are the resolve and reject callbacks, specifying the default values for the callbacks.
  2. Return a new Promise instance.
  3. Different callbacks are called depending on the current state of the Promise instance.
  4. Bind the result of the callback to the new promise.

The first two operations are relatively simple:

  • The first operation takes two parameters, so we only need to set the two parameters onResolved and onRejected to the THEN method.
  • The second action is to return a new Promise instance, so return the New Promise directly in the THEN method.

The third and fourth operations are more complicated and need to be analyzed:

  • The third operation is to call different callbacks depending on the state. There are three possibilities for the current state of the promise instance: pending, fulfilled, or rejected.

(1) When the state is fulfilled, the onResolved callback function is called;

(2) call the onRejected callback when the state is rejected;

(3) When the state is pending, pass the onResolved and onRejected callbacks into the Callbacks array together and wait for the subsequent call.

  • The fourth operation binds the result of the callback to the new Promise. Since this is done regardless of the state, we wrap it as a handler method to reduce duplication of code. Since you want to bind the returned result to the new promise, write the handler method inside the promise. An exception may occur during the execution of the callback function, so use a try/catch to catch the exception. The results of the callback function are divided into the following three categories, which correspond to different returns:

(1) Throw an exception and return the PROMISE as a failure.

(2) Return a promise, and this is the result of returning a promise.

(3) Return not promise, return promise for success, value for return value.

The code is as follows:

Promise1.prototype.then = function(onResolved, onRejected) {
  var _this = this;
  // Specify the default value for the callback function
  onResolved = typeof onResolved == "function" ? onResolved : value= > value;
  onRejected = typeof onRejected == "function" ? onRejected : reason= > { throw reason; };
  return new Promise1(function(reslove, reject) {
    // The handler method executes the callback function and passes a class of return values to the promise to be returned
    function handler(callback) {
      try {
        var result = callback(_this.data);
        if (result instanceof Promise1) {
          // Return a promise
          result.then(resolve, reject);
        } else {
          // A promise is not returnedresolve(result); }}catch (error) {
        // Throw an exceptionreject(error); }}if (_this.status == PENDING) {
      // Save the callback function when the pending state changes and call it later
      _this.callbacks.push({
        onResolved(value) {
          // After execution, we need to pass the return value to the last promise to be returned
          handler(onResolved);
        },
        onRejected(reason){ handler(onRejected); }});console.log(_this.callbacks);
    } else if (_this.status == FULFILLED) {
      handler(onResolved);
    } else{ handler(onRejected); }}); };Copy the code