Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve a simple promise, the article is very detailed, has a certain reference value, interested friends must read it!

Step1 builds the framework

1. First of all, we need to put a promise function ontology here and then add the execution functions of resolve and reject to it.

Function Promise (execotor) {}

two。 There are two main methods of then and catch in the original promise, so we need to mount then and catch to the prototype of promise

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

3. There are several common methods for mounting promise: resolve, reject, all, race, etc.

Resolve: returns a promise object with a specified result

Promise.resolve = function (value) {}

Reject: a method to return a failed state

Promise.reject = function (value) {}

All: returns a promise object, which is considered successful only if all promise are returned.

Promise.all = function (value) {}

Race: returns a promise object whose state is determined by the first returned object. Which function in this race is executed first will directly return the first value, and the rest will continue to execute.

Promise.race = function (value) {}

4. Global declaration mypromise

Window.Promise = Promise

5. Set up a self-executing function to wrap all the above

(function (window) {}) () step2 fills the built Promise framework

1. Populate function Promise ()

(1) let self = this fixed a this inside a function. This this will play an important role in the future.

(2) self.status = 'pending' adds a base state to the Promise function ontology' pending'

(3) self.data = undefined establish a data source to store the results sent back by resolve

(4) self.callbacks = [] create an array to save all callbacks in promise

two。 Populate function resolve ()

(1) if (self.status! = = 'pending') {return} determines whether the status of the current incoming process is pending, and continues the following operation instead of returning it directly.

There are three states within promise: pending, resolved, and rejected. These three states are all switch variables, and cannot be changed if the state is changed from pending to other states.

(2) self.status = 'resolved' change the status of the process to resolved

(3) self.data = value to save the value, which will be needed for callbacks in then later.

(4) put on the most important part of the execution function. If there is a callback function to be executed in sele.data, execute it asynchronously immediately.

If (self.callbacks.length > 0) {setTimeout () = > {self.callbacks.forEach (callbackObj = > {callbackObj.onResolved (value)})}, 0)}

3. Populate function reject ()

(1) same as resolve function, here is brief

4. Populate execotor method

If there is an error in the execution of the promise body, the error message is captured by catch, and catch will jump to this function to execute a separate reject

Try {execotor (resolve, reject)} catch (error) {reject (error)}

5. Populate the .then function

First of all, we need to distinguish the state of the incoming process, save the callback function if it is pending state, and do what it should do if it is not pending state.

(1) if (self.status = = 'pending') if the current state is pending, we will save it

Self.callbacks.push ({onResolved () {onResolved (self.data)}, onRejected () {onRejected (self.data)}})

(2) else if (self.status = = 'resolved') if the status of status is resolved

Let's give it a happy execution.

SetTimeout (() = > {onResolved (self.data)}, 0)

But there is such a state: resolve is not executed, but the state has changed, so we can't execute resolve and execute rejected instead.

Else {setTimeout (()) = > {onRejecyed (self.data)}, 0)}

After two "simple" steps like how to stuff an elephant into the refrigerator, we have a simple Promise.

The above is all the contents of the article "how to achieve a simple promise". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.