手写一个PromiseA+的实现
/**
* 定义Promise
* 先实现一个最简单的。用setTimeout模拟一个异步的请求。
*/
function MyPromise(fn){
var value= null;
var deferreds = [];
this.then = function(onFulfilled) {
deferreds.push(onFulfilled);
}
function resolve(value){
deferreds.forEach(function(deferred){
deferred(value);
})
}
fn(resolve);
}
// 使用MyPromise
var p = new MyPromise(function(resolve){
setTimeout(function(){
resolve('这是响应的数据')
},2000)
})
p.then(function(response){
console.log(response);
})
/**
* 延时机制
* 如果promise是同步代码，resolve会先于then执行，这时deferreds队列还是空的，还有一个问题是, 后续的注册的回调函数再也不会被执行了
* 可以在控制台里观察一下这种现象
*/
var p1 = new MyPromise(function(resolve){
resolve('响应的数据')
})
p1.then(function(response){
console.log(response); // 这一行永远不会被打印出来，想一下为什么？
})
// 加入延时机制，来重新定义MyPromise (我们用setTimeout来模拟，setTimeout是macroTask，真正的promise的延时是一个microTask)
function MyPromise(fn){
var value= null;
var deferreds = [];
this.then = function(onFulfilled) {
deferreds.push(onFulfilled);
}
function resolve(value){
setTimeout(function(){
deferreds.forEach(function(deferred){
deferred(value);
})
},0)
}
fn(resolve);
}
// 此时，我们再次使用一下我们定义的MyPromise，来执行一下同步代码
var p1 = new MyPromise(function(resolve){
resolve('响应的数据')
})
p1.then(function(response){
console.log(response); // 竟然打印出来了
})
// 到此，我们设计出了延时机制的promise
/**
* 状态机制
* 如果 Promise 异步操作已经成功，之后调用 then 注册的回调再也不会执行了
*/
var p1 = new MyPromise(function(resolve){
resolve('响应的数据')
})
p1.then(function(response){
console.log(response); // 此处能打印出来
})
setTimeout(()=>{
p1.then((response)=>{
console.log(response) // 此处没有被打印出来，为什么？
})
},)
// 由于promise异步操作已经完成，之后调用的then方法往deferreds里加入的回调函数都没有机会执行，
// 为了解决这个问题，需要引入规范中所说的 states，即每个 Promise 存在三个互斥状态：pending（等待状态）、fulfilled（成功态）、rejected（失败态）
// 基于此，我们重新设计MyPromise
function MyPromise(fn){
var value= null;
var status = 'pending'; // 加入状态的字段
var deferreds = [];
this.then = function(onFulfilled) {
if(status === 'pending'){ // 加入状态的判断，如果状态是fullfilled态，则直接执行回调
deferreds.push(onFulfilled);
}else{
onFulfilled(value)
}
}
function resolve(v){
setTimeout(function(){
value = v;
status = 'fulfilled' // 执行resolve的时候，把状态变成fulfilled态
deferreds.forEach(function(deferred){
deferred(value);
})
},0)
}
fn(resolve);
}
// 我们使用我们改进后的promise，再次运行刚刚的这段代码。我们发现。之后调用 then 注册的回调再也执行了
var p1 = new MyPromise(function(resolve){
resolve('响应的数据')
})
p1.then(function(response){
console.log(response); // 此处能打印出来
})
setTimeout(()=>{
p1.then((response)=>{
console.log(response) // 此处这次被打印出来了
})
},)
/**
* 串行的Promise
* 1.then方法会返回一个新的promise
* 2.串行Promise是指在当前promise达到fulfilled状态后，即开始进行下一个promise
*/
// 首先我们来实现then方法返回一个新的promise，我们只需要在then方法中返回一个新的promise即可
function MyPromise(fn){
var value= null;
var status = 'pending';
var deferreds = [];
this.then = function(onFulfilled) {
// 我们只需要在此处返回一个新的promise即可。but返回的promise和当前promise中的注册函数需要建立什么关系？
// 来看一下我们如何将返回的promise和当前的promise捆绑在一起的
return new MyPromise(resolve=>{
if(status === 'pending'){
deferreds.push({ // 我们将当前promise的回调函数（onFulfilled）和 返回的新promise的resolve绑在一起，扔到当前deferreds的队列中
onFulfilled:onFulfilled,
resolve:resolve
});
}else{
var res = onFulfilled(value);
resolve(res);
}
})
}
function resolve(v){
setTimeout(function(){
value = v;
status = 'fulfilled'
deferreds.forEach(function(deferred){
// 当回调函数触发的时候，我们得到回调函数的返回值，并调用绑定的下一个promise的resolve方法
// 此时完成了当前promise达到fulfilled状态后，即开始进行下一个promise的功能
var res = deferred.onFulfilled(value);
deferred.resolve(res);
})
},0)
}
fn(resolve);
}
// 下面我们写段代码验证一下
var p1 = new MyPromise(resolve=>{
setTimeout(()=>{resolve('1')},2000)
})
p1.then((res)=>{
console.log(res);
return '2';
}).then((res)=>{
console.log(res);
}).then(()=>{
console.log('3');
})
// 完美，我们依次打印出了1，2，3。但是我们还剩一个问题没有解决。就是在then的回调函数中，返回值有可能是个promise，
// 如果then的回调函数的返回值是个promise，那then返回的promise的内部value就应该是then的回调函数返回的promise的内部值
// 我们应该怎么做呢。其实，很简单，我们从resolve方法做手脚，上边的例子我们已经实现了回调函数的返回值，会传给下一个promise的resolve方法。
// 我们在resolve中判断接受到的值是一个普通的值，还是一个promise。如果不是promise，逻辑保持不变。如果是promise，则我们调用这个promise的then方法
// 通过调用这个promise的then方法，把当前的resolve变成这个promise的回调函数。
function MyPromise(fn){
var value= null;
var status = 'pending';
var deferreds = [];
this.then = function(onFulfilled) {
return new MyPromise(resolve=>{
if(status === 'pending'){
deferreds.push({
onFulfilled:onFulfilled,
resolve:resolve
});
}else{
var res = onFulfilled(value);
resolve(res);
}
})
}
function resolve(v){
setTimeout(function(){
if (v instanceof MyPromise){
v.then(resolve); // 如果v是一个promise，那就会等待v这个promise成完成态的时候，再次触发当前promise的resolve方法。
}else{
value = v;
status = 'fulfilled'
deferreds.forEach(function(deferred){
var res = deferred.onFulfilled(value);
deferred.resolve(res);
})
}
},0)
}
fn(resolve);
}
// 实验成果的时候到了。我们看看下面这段代码的输出
var p1 = new MyPromise(resolve=>{
setTimeout(()=>{resolve('1')},2000)
})
p1.then((res)=>{
console.log(res);
return new MyPromise(resolve=>{setTimeout(()=>resolve('2'),3000)})
}).then((res)=>{
console.log(res);
}).then(()=>{
console.log('3');
})
// 如我们预期的那样，两秒之后输出1，然后再过三秒输出2，之后输出3