promise实现

思路就是把then的所有方法都加到一个队列里面,然后resolve的时候依次执行,

基础实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getUserID(){
return new Promise(function(resolve){
setTimeout(function(){
resolve(123);
},100);
});
}
getUserID().then(function(id){
console.log(id);
});
function Promise(fn) {
var deferreds = [];
this.then = function(onFulfilled){
deferreds.push(onFulfilled);
return this;
};
var resolve = function(value){
deferreds.forEach(function(deferred){
deferred(value);
});
};
fn(resolve);
}

Promise内如果是同步代码会有问题,会直接走resove

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function getUserID(){
return new Promise(function(resolve){
resolve(123);
});
}
getUserID().then(function(id){
console.log(id);
});
function Promise(fn) {
var deferreds = [];
this.then = function(onFulfilled){
deferreds.push(onFulfilled);
return this;
};
var resolve = function(value){
setTimeout(function(){//加入任务队列,让主线程先执行
deferreds.forEach(function(deferred){
deferred(value);
});
},0);
};
fn(resolve);
}

如果promise已经完成,之后then的回调不再执行,引入状态pending(等待)、fulfilled(完成)、rejected(拒绝)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function Promise(fn){
var deferreds = [];
var status = "pending";
var value = null;
this.then = function(onFulfilled){
if(status === "pending"){
deferreds.push(onFulfilled);\\加入队列
return this;
}
onFulfilled(value);\\直接执行
return this;
};

function resolove(newValue){
value = newValue;
status = "fulfilled";
setTimeout(function(){
deferreds.forEach(function(deferred){
deferred(value);
});
},0);
}

fn(resolve);
}
------ 本文结束 感谢阅读------

坚持原创技术