This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Step1 build the framework

1. First we need to place a promise function body here and then add resolve and reject to it

  function Promise(execotor) {}
Copy the code

2. There are two main methods, THEN and catch, in the original promise, so we need to mount THEN and catch to the prototype of the promise

  Promise.prototype.then = function (onResolved, onRejected) {}
  Promise.prototype.catch = function (onRejected) {}
Copy the code

3. Mount common methods resolve, Reject, All, Race, and so on for promises

Resolve: Returns a promise object that specifies the result

  Promise.resolve = function (value) {}Copy the code

Reject: Method for returning a failed state

  Promise.reject = function (value) {}Copy the code

All: Returns a Promise object. This state is successful only if all promises return

  Promise.all = function (value) {}Copy the code

Race: Returns a promise object whose state is determined by the first returned object. Whichever function in this race finishes first returns the first value, and the rest continue

  Promise.race = function (value) {}Copy the code

4. Declare myPromise globally

  window.Promise = Promise
Copy the code

5. Create a self-executing function to wrap all of the above

(function (window) {

})()
Copy the code

Step2 fill the constructed Promise frame

1. Fill function Promise()

(1) let self = this; (2) self.status = ‘pending’ adds a base state to the Promise function body. (3) self.data = undefined creates a data source, Self.callbacks = [] Creates an array to store all the callbacks from a Promise

2. Populate function resolve()

(1) if (self.status! == ‘pending’) {return} Check whether the current incoming process is pending

There are three states in a promise: Pending, Resolved and Rejected. These three states are all switch variables and cannot be changed after the states are changed from pending to other states.

(2) self.status = ‘resolved’ (3) self.data = value (‘resolved’) If there is a callback function in sele.data that needs to be executed, execute it immediately and asynchronously

    if (self.callbacks.length > 0) {
      setTimeout(() = > {
        self.callbacks.forEach(callbackObj= > {
          callbackObj.onResolved(value)
        })
      }, 0)}Copy the code

3. Fill in function reject()

(1) Same as resolve function, brief here

4. Populate the execotor method

If the Promise body fails to execute, and the error message is caught by a catch, the catch jumps to the function to execute a reject alone

     try {
       execotor(resolve, reject)
     } catch (error) {
       reject(error)
     }
Copy the code

5. Fill in the. Then function

(1) If (self.status === ‘pending’) if (self.status === ‘pending’) We’re just going to save it

    self.callbacks.push({
      onResolved() { onResolved(self.data) },
      onRejected() { onRejected(self.data) }
    })
Copy the code

(2) else if (self.status === ‘resolved’

Let’s have fun doing it

    setTimeout(() = > {
      onResolved(self.data)
    }, 0)
Copy the code

Resolve (rejected); resolve (rejected); resolve (rejected)

   else{
     setTimeout(() = > {
       onRejecyed(self.data)
     }, 0)}Copy the code

After two “easy” steps like how to fit an elephant in a refrigerator, we fulfilled a simple PromiseIs not very simple ah, quickly call on the side of the small partner to try together!