Promise not very strange for all of us, it is an asynchronous programming solutions, mainly to solve the front-end pullback regional issues. By Nguyen teacher's words, it "is a container, which holds the event will end sometime in the future (usually an asynchronous operation) of the result."
Promise has three states: pending (initial state), fulfilled (success), reject (failure), the initial state pending only become fulfilled or reject, this process is irreversible, when the state is changed, it will trigger the corresponding callback method. In addition, supports chained calls, then / catch will return a Promise, call for a chain, a theft on FIG MDN, Promise execution flow as shown below:
.png)
Specifically divided into four simple steps:
1, define a Fn actuator, comes function with two arguments, resolve / reject, when instantiating Promise, Fn actuator call, passing parameters reslove / reject, initialization callback queue taskList
2, when performing the method then determines the initial state is not Pending, if so, then the callback fullfilled / reject in advance taskList execution queue, then the method returns an instance promise
3, implemented callback chain, id used to identify different instances promise
4, when triggered effector function parameters, to judge based on the id of the currently executing callback method
Implementation code:
1 // public variables for identifying MyPromise Example 2 index = 0;
3 // promise receiving a callback function fn, there are two parameters, reslove, reject 4 function MyPromise (fn) {
5 var _this = this;
6 // promise of three states 7 this.RESOLVE = "fullfilled";
8 this.PENDING = "pending";
9 this.REJECT = "reject";
10 this.id = index++;
11 // initial default state penddding12 this.state = this.PENDING;
13 // perform the task list 14 this.taskList = [];
15 // callback executed last 16 this.finallyCallback = null;
17 // bind change reslove / reject vivo function of this point, point to ensure MyPromise18 fn.call (this, this.resolve.bind (this), this.reject.bind (this));
19 }
20
21 MyPromise.prototype.resolve = function(value) {
22 this.state = this.RESOLVE;
23 // 2, when the state change, the method of performing complete 24 this.taskList [this.id] && this.handler (this.taskList [this.id], value);
25 };
26
27 MyPromise.prototype.reject = function(value) {
28 this.state = this.REJECT;
29 // 2, when the state change, the method of performing complete 30 this.taskList [this.id] && this.handler (this.taskList [this.id], value);
31 };
32 // callback tasks 33 MyPromise.prototype.handler = function (task, value) {
34 were result = null;
35 if (this.state === this.RESOLVE) {
36 result = task.onFullFilled(value);
37 } else if (this.state === this.REJECT) {
38 result = task.onReject(value);
39 }
40 was NextID this.id = + 1;
41 // the return value is not required MyPromise example, if the previous task queue assigned to the new instance MyPromise 42 if (result instanceof MyPromise) {
43 result.id = nextId;
44 result.taskList = this.taskList;
45 result.finallyCallback = this.finallyCallback;
46 } else {
Example 47 // 48 // no return MyPromise finally if the callback, the callback perform final 49 this.finallyCallback && this.finallyCallback ();
50 }
51 };
52 // onFullFilled: callback successful, onReject: failed callback 53 MyPromise.prototype.then = function (onFullFilled, onReject) {
54 var _this = this,
55 obj = {
56 onFullFilled: onFullFilled,
57 onReject: onReject
58 };
1 // 59, initialization, a subsequent task may be pushed to perform tasks in the queue 60 if (this.state === this.PENDING) {
61 this.taskList.push(obj);
62 }
63 // return a promise, to support chained calls 64 return this;
65 };
66
67 // method executed last, regardless of the state of MyPromise 68 MyPromise.prototype.finally = function (callback) {
69 this.finallyCallback = callback;
70 };
Test code:
var cc = new MyPromise(function(reslove, reject) {
setTimeout(function() {
reslove(2);
}, 500);
});
var dd = new MyPromise(function(reslove, reject) {
setTimeout(function() {
reject(3);
}, 500);
});
cc.then(function(num) {
console.log(num);
return dd;
})
.then(
function(cc) {
console.log(cc);
},
function(e) {
console.log(5);
}
)
.finally(function() {
console.log("Game Over");
});
console.log(1);
.png)
