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

This article mainly introduces "how to write the source code that conforms to the Promise/A+ specification Promise". In the daily operation, I believe that many people have doubts about how to write the source code that conforms to the Promise/A+ specification Promise. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for everyone to answer the question of "how to write the source code that conforms to the Promise/A+ specification Promise". Next, please follow the editor to study!

Source code implementation of Promise

/ * 1. When new Promise, you need to pass an executor executor, and the executor immediately executes * 2. Executor accepts two parameters, resolve and reject * 3. Promise can only go from pending to rejected, or from pending to fulfilled * 4. Once the state of promise is confirmed, it will not change * 5. Promise has a then method, and then receives two parameters They are promise's successful callback onFulfilled, * and promise's failed callback onRejected * 6. If promise is successful when then is called, onFulfilled is executed and the value of promise is passed in as an argument. * if promise has failed, execute onRejected and pass in the reason for the failure of promise as a parameter. * if the status of promise is pending, you need to store the onFulfilled and onRejected functions, wait for the status to be determined, and then execute the corresponding functions (publish and subscribe) * 7. The parameters onFulfilled and onRejected of then can default to * 8. Promise can be then multiple times, and the then method of promise returns a promise * 9. If then returns a result, the result is passed as an argument to the next then's successful callback (onFulfilled) * 10. If an exception is thrown in the then, the exception is passed as an argument to the next then's failed callback (onRejected) * 11. If the then returns a promise, it will wait for the promise to be executed. If the promise succeeds, * it will proceed to the success of the next then. If it fails, it will go to the failure of the next then * / const PENDING = 'pending'; const FULFILLED =' fulfilled'; const REJECTED = 'rejected'; function Promise (executor) {let self = this; self.status = PENDING; self.onFulfilled = [] / / successful callback self.onRejected = []; / / failed callback / / PromiseA+ 2.1 function resolve (value) {if (self.status = PENDING) {self.status = FULFILLED; self.value = value; self.onFulfilled.forEach (fn = > fn ()) / / PromiseA+ 2.2.6.1} function reject (reason) {if (self.status = PENDING) {self.status = REJECTED; self.reason = reason; self.onRejected.forEach (fn = > fn ()); / / PromiseA+ 2.2.6.2}} try {executor (resolve, reject) } catch (e) {reject (e);}} Promise.prototype.then = function (onFulfilled, onRejected) {/ / PromiseA+ 2.2.1 / PromiseA+ 2.2.5 / PromiseA+ 2.2.7.3 / PromiseA+ 2.2.7.4 onFulfilled = typeof onFulfilled = = 'function'? OnFulfilled: value = > value; onRejected = typeof onRejected = = 'function'? OnRejected: reason = > {throw reason}; let self = this / / PromiseA+ 2.2.7 let promise2 = new Promise ((resolve Reject) = > {if (self.status = FULFILLED) {/ / PromiseA+ 2.2.2 / / PromiseA+ 2.2.4-- setTimeout setTimeout () = > {try {/ / PromiseA+ 2.2.7.1 let x = onFulfilled (self.value) ResolvePromise (promise2, x, resolve, reject);} catch (e) {/ / PromiseA+ 2.2.7.2 reject (e);}}) } else if (self.status = REJECTED) {/ / PromiseA+ 2.2.3 setTimeout (() = > {try {let x = onRejected (self.reason); resolvePromise (promise2, x, resolve, reject);} catch (e) {reject (e) });} else if (self.status = PENDING) {self.onFulfilled.push () = > {setTimeout () = > {try {let x = onFulfilled (self.value); resolvePromise (promise2, x, resolve, reject) } catch (e) {reject (e);}) Self.onRejected.push (() = > {setTimeout () = > {try {let x = onRejected (self.reason); resolvePromise (promise2, x, resolve, reject);} catch (e) {reject (e) }); return promise2;} function resolvePromise (promise2, x, resolve, reject) {let self = this; / / PromiseA+ 2.3.1 if (promise2 = = x) {reject (new TypeError ('Chaining cycle')) } if (x & & typeof x = 'object' | | typeof x = =' function') {let used; / / PromiseA+2.3.3.3.3 can only call try {let then = x.then once If (typeof then = 'function') {/ / PromiseA+2.3.3 then.call (x, (y) = > {/ / PromiseA+2.3.3.1 if (used) return; used = true; resolvePromise (promise2, y, resolve, reject) }, (r) = > {/ / PromiseA+2.3.3.2 if (used) return; used = true; reject (r);}) } else {/ / PromiseA+2.3.3.4 if (used) return; used = true; resolve (x);}} catch (e) {/ / PromiseA+ 2.3.3.2 if (used) return; used = true Reject (e);}} else {/ / PromiseA+ 2.3.3.4 resolve (x);}} module.exports = Promise

There are special test scripts to test whether the code you write conforms to the PromiseA+ specification.

First, add the following code to the code of the promise implementation:

PromisePromise.defer = Promise.deferred = function () {let dfd = {}; dfd.promise = new Promise ((resolve, reject) = > {dfd.resolve = resolve; dfd.reject = reject;}); return dfd;}

Install the test script:

Npm install-g promises-aplus-tests

If the current promise source code file name is promise.js

Then execute the following command in the corresponding directory:

Promises-aplus-tests promise.js

There are 872 test cases in promises-aplus-tests. The above code can pass all use cases perfectly.

Give a brief description of the above code implementation (some of the other comments have been clearly written):

Calls to onFulfilled and onFulfilled need to be placed in setTimeout because the specification says: onFulfilled or onRejected must not be called until the execution context stack contains only platform code. Using setTimeout only simulates asynchronism, and native Promise is not implemented this way.

two。 Why the flag of usedd is needed in the function of resolvePromise is also because it is clearly stated in the specification: If both resolvePromise and rejectPromise are called, or multiple calls to the same argument are made, the first call takes precedence, and any further calls are ignored. So we need such a flag to ensure that it is only executed once.

3. Successful callbacks and failed callbacks are stored in self.onFulfilled and self.onRejected. According to specification 2.6, when the promise changes from the setting state, the callback corresponding to the then needs to be specified in order.

Specification of PromiseA+ (translated version)

PS: here are the specifications of my translation for reference

Terminology

Promise is an object or function with a then method, and its behavior follows this specification.

Thenable is an object or function with a then method

Value is the value if the promise status is successful, including undefined/thenable or promise

Exception is an outlier thrown using throw

Reason is the value when the promise state fails

Request

2.1 Promise States

Promise must be in one of the following three states: pending, fulfilled, or rejected

2.1.1 if promise is in pending state

2.1.1.1 can be fulfilled or rejected

2.1.2 if promise is in fulfilled state

2.1.2.1 does not change to another state 2.1.2.2 there must be a value

2.1.3 if promise is in rejected state

2.1.3.1 will not change to another state 2.1.3.2 there must be a reason where promise is reject

To sum up: the status of promise can only be changed from pending to fulfilled, or from pending to rejected.promise success. If there is a successful value.promise failure, there is a reason for failure.

2.2 then method

Promise must provide a then method to access the final result

The then method of promise receives two parameters

Promise.then (onFulfilled, onRejected)

2.2.1 both onFulfilled and onRejected are optional parameters

2.2.1.1 onFulfilled must be a function type 2.2.1.2 onRejected must be a function type

2.2.2 if onFulfilled is a function:

2.2.2.1 onFulfilled must be called when promise becomes fulfilled. The parameter is value 2.2.2.2 of promise. Before the state of promise is not fulfilled, 2.2.2.3 onFulfilled can only be called once.

2.2.3 if onRejected is a function:

2.2.3.1 onRejected must be called when promise becomes rejected. The parameter is reason 2.2.3.2 of promise. Before the state of promise is not rejected, 2.2.3.3 onRejected can only be called once.

2.2.4 onFulfilled and onRejected should be micro tasks

2.2.5 onFulfilled and onRejected must be called as functions

2.2.6 the then method may be called multiple times

2.2.6.1 if promise becomes fulfilled, all onFulfilled callbacks need to be executed in the order of then 2.2.6.2 if promise becomes rejected, all onRejected callbacks need to be executed in the order of then

2.2.7 then must return a promise

Promise2 = promise1.then (onFulfilled, onRejected); 2.2.7.1 the result of onFulfilled or onRejected execution is x, call resolvePromise 2.2.7.2 if onFulfilled or onRejected throws an exception eJournal 2 needs to be reject 2.2.7.3 if onFulfilled is not a function, promise2 takes the value of promise1 fulfilled 2.2.7.4 if onRejected is not a function, promise2 uses the reason rejected of promise1

2.3 resolvePromise

ResolvePromise (promise2, x, resolve, reject)

2.3.1 if promise2 and x are equal, then reject promise with a TypeError

2.3.2 if x is a promsie

2.3.2.1 if x is in the pending state, then promise must be in pending until x becomes fulfilled or rejected. 2.3.2.2 if x is fulfilled, fulfill promise with the same value. 2.3.2.3 if x is rejected, reject promise with the same reason.

2.3.3 if x is an object or a function

2.3.3.1 let then = x.then. 2.3.3.2 if x.then makes an error in this step, then reject promise with eas the reason.. 2.3.3.3 if then is a function, the input parameter of then.call (x, resolvePromiseFn, rejectPromise) 2.3.3.3.1 resolvePromiseFn is y, execute resolvePromise (promise2, y, resolve, reject); the input parameter of 2.3.3.3.2 rejectPromise is r, reject promise with r. 2.3.3.3.3 if both resolvePromise and rejectPromise are called, then the first call takes precedence and subsequent calls are ignored. 2.3.3.3.4 if calling then throws an exception e 2.3.3.3.4.1 if resolvePromise or rejectPromise has already been called, then ignore 2.3.3.3.4.3 otherwise, reject promise with eas the reason 2.3.3.4 if then is not a function. Fulfill promise with x.

2.3.4 if x is not an object or function,fulfill promise with x.

Other methods of Promise

Although the above promise source code already conforms to the PromiseA+ specification, the native Promise also provides some other methods, such as:

Promise.resolve ()

Promise.reject ()

Promise.prototype.catch ()

Promise.prototype.finally ()

Promise.all ()

Promise.race ()

Let's talk about the implementation of each method in detail:

Promise.resolve

Promise.resolve (value) returns a Promise object parsed with a given value.

If value is a thenable object, the returned promise will "follow" the thenable object, taking its final state

If the value passed in is itself a promise object, then Promise.resolve will return the promise object intact without any modification.

In other cases, the promise object with this value as a success state is returned directly.

Promise.resolve = function (param) {if (param instanceof Promise) {return param;} return new Promise ((resolve, reject) = > {if (param & & typeof param = = 'object' & & typeof param.then =' function') {setTimeout () = > {param.then (resolve, reject);}) } else {resolve (param);}});}

The reason for adding setTimeout to the execution of the thenable object is inferred from the result of the execution of the native Promise object. For the following test code, the native execution result is: 20 400 30; for the same execution order, the setTimeout delay is increased.

Test the code:

Let p = Promise.resolve (20); p.then ((data) = > {console.log (data);}); let p2 = Promise.resolve ({then: function (resolve, reject) {resolve (30);}}); p2.then ((data) = > {console.log (data)}); let p3 = Promise.resolve (new Promise ((resolve, reject) = > {resolve (400)})) P3.then ((data) = > {console.log (data)})

Promise.reject

The Promise.reject method is different from Promise.resolve, and the parameter of the Promise.reject () method will be used as the reason for reject intact and become the parameter of the subsequent method.

Promise.reject = function (reason) {return new Promise ((resolve, reject) = > {reject (reason);});}

Promise.prototype.catch

Promise.prototype.catch is used to specify the callback in the event of an error. It is a special then method. After catch, you can continue.

Promise.prototype.catch = function (onRejected) {return this.then (null, onRejected);}

Promise.prototype.finally

Regardless of success or failure, you will go to finally, and after finally, you can continue to then. And the value will be passed intact to the following then.

Promise.prototype.finally = function (callback) {return this.then ((value) = > {return Promise.resolve (callback ()). Then () = > {return value;});}, (err) = > {return Promise.resolve (callback ()). Then (() = > {throw err;});});}

Promise.all

Promise.all (promises) returns a promise object

If the parameter passed in is an empty iterable object, then the promise object callback is completed (resolve), only in this case, it is executed synchronously, and the rest is returned asynchronously.

If the passed parameter does not contain any promise, an asynchronous completion is returned.

The callback is completed when all promise in promises are "done" or when promise is not included in the parameter.

If one of the parameters promise fails, the promise object returned by Promise.all fails

In any case, the result of the completion status of promise returned by Promise.all is an array

Promise.all = function (promises) {promises = Array.from (promises); / / convert iterable objects to an array return new Promise ((resolve, reject) = > {let index = 0; let result = []; if (promises.length = 0) {resolve (result)) } else {function processValue (I, data) {result [I] = data; if (+ + index = promises.length) {resolve (result);}} for (let I = 0; I

< promises.length; i++) { //promises[i] 可能是普通值 Promise.resolve(promises[i]).then((data) =>

{processValue (I, data);}, (err) = > {reject (err); return;});});}

Test the code:

Var promise1 = new Promise ((resolve, reject) = > {resolve (3);}) var promise2 = 42; var promise3 = new Promise (function (resolve, reject) {setTimeout (resolve, promise2, 'foo');}); Promise.all ([promise1, promise2, promise3]) .then (function (values) {console.log (values); / / [3,42,' foo']}, (err) = > {console.log (err)}) Var p = Promise.all ([]); / / will be immediately resolved var p2 = Promise.all ([1337, "hi"]); / / non-promise values will be ignored, but the evaluation will be done asynchronously console.log (p); console.log (p2) setTimeout (function () {console.log ('the stack is now empty'); console.log (p2);})

Promise.race

The Promise.race function returns a Promise that will be completed in the same way as the first passed promise. It can be either a resolves or a rejects, depending on which of the two ways the first one is done.

If the passed argument array is empty, the returned promise will wait forever.

If the iteration contains one or more non-commitment values and / or resolved / rejected commitments, the Promise.race resolves to the first value found in the iteration.

Promise.race = function (promises) {promises = Array.from (promises); / / convert iterable objects to an array return new Promise ((resolve, reject) = > {if (promises.length = 0) {return;} else {for (let I = 0; I)

< promises.length; i++) { Promise.resolve(promises[i]).then((data) =>

{resolve (data); return;}, (err) = > {reject (err); return;});});}

Test the code:

Promise.race ([new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (100)}, 1000)}), undefined, new Promise ((resolve, reject) = > {setTimeout (() = > {reject (100)}, 100)})] .then ((data) = > {console.log ('success', data);}, (err) = > {console.log ('err', err);}) Promise.race ([new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (100,200)}), new Promise ((resolve, reject) = > {setTimeout (() = > {resolve (200,200)}), new Promise ((resolve, reject) = > {setTimeout (() = > {reject (100,100)})] .then ((data) = > {console.log (data)) }, (err) = > {console.log (err);}); at this point, the study on "how to write source code that conforms to the Promise/A+ specification Promise" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.