做对这几道题,你就彻底理解了Promise

·  阅读 829

这是我结合Promise A+规范设计的几道题,基本上搞懂了这几道题就差不多搞懂了Promise A+规范。欢迎关注mini-promise一起学习 es6-promise 的源码。在本仓库中手写了 es6-promise的源码、微任务队列的刷新机制、async await语法糖原理等

1.多个Promise的执行

console.log('ha1');
setTimeout(() => {
 console.log(7); 
});
new Promise((resolve, reject) => {
    console.log('ha1');
    resolve('test')
})
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => {
    console.log(res);
  });
new Promise((resolve, reject) => {
    console.log('ha2')
    resolve('666')
})
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });

2. resolve promise自身的几种情况

2.1 let定义

let pro1 = new Promise((resolve, reject) => {
  resolve(pro1);
})

pro1.then((res) => {
  console.log('pro1..res..', res);
}, err => {
  console.log('pro1..err..', err);
})

2.2 const定义

const pro2 = new Promise((resolve, reject) => {
  resolve(pro2);
})

pro2.then((res) => {
  console.log('pro2..res..', res);
}, err => {
  console.log('pro2..err..', err);
})

2.3 var定义

var pro3 = new Promise((resolve, reject) => {
  resolve(pro3);
})

pro3.then((res) => {
  console.log('pro3..res..', res);
}, err => {
  console.log('pro3..err..', err);
})
var pro4 = new Promise((resolve, reject) => {
  setTimeout(() => {
     resolve(pro4); 
  }, 0)
})

pro4.then((res) => {
  console.log('pro4..res..', res);
}, err => {
  console.log('pro4..err..', err);
})

3. then方法

3.1 onFulfilled及onRejected的返回值

var p = new Promise((resolve, reject) => {
    resolve('p..success')
});
var p2 = p.then((res) => {
    console.log('p..res', res);
    return 'p.res'; // 如果没有return语句呢?试试去掉 return
}, err => {
    console.log('p..err', err);
    return 'p.err';
})
p2.then(res => {
    console.log('p2..res', res);
}, err => {
    console.log('p2..err', err);
})
var p = new Promise((resolve, reject) => {
    console.log('第一层')
    resolve('第一层的resolve')
})
.then(res => {
    console.log('p..res', res);
    return new Promise((resolve, reject) => {
        console.log('这是什么');
        resolve('look at this');
    })
}, err => {
    console.log('p..err', err);
})
.then(res => {
    console.log('第三层..res', res);
}, err => {
    console.log('第三层..err', err);
})

3.2 onFulfilled或者onRejected省略的情况

var p = new Promise((resolve, reject) => {
    resolve('p..success')
});
p.then().then().then(res => {
    console.log('p...res', res);
}, err => {
    console.log('p...err', err)
})
// 或者
var p = new Promise((resolve, reject) => {
    reject('p..reject')
});
p.then().then().then(res => {
    console.log('p...res', res);
}, err => {
    console.log('p...err', err)
})
// 或者
var p = new Promise((resolve, reject) => {
    reject('p..reject')
});
p.then('abc', 'efg').then().then(res => {
    console.log('p...res', res);
}, err => {
    console.log('p...err', err)
})

3.3 onFulfilled或者onRejected有异常的情况下

var p = new Promise((resolve, reject) => {
    resolve('p..success');
})
.then((res) => {
    console.log('p..res', res);
    console.log(a + b);
    return 'p.res';
}, err => {
    console.log('p..err', err);
})
.then(res => {
    console.log('p2..res', res);
}, err => {
    console.log('p2..err', err);
})

4. promise resolve的解析过程

4.1 resolve 或者 reject一个promise

var p = new Promise((resolve, reject) => {
    resolve(new Promise((resolve2, reject2) => {
        resolve2('这是内部的resolve');
    }))
})
p.then(res => {
    console.log('p..res', res);
}, err => {
    console.log('p..err', err);
})
// reject
var p = new Promise((resolve, reject) => {
    reject(new Promise((resolve2, reject2) => {
        resolve2('这是内部的resolve');
    }))
})
p.then(res => {
    console.log('p..res', res);
}, err => {
    console.log('p..err', err);
})
var p = new Promise((resolve, reject) => {
    console.log('第一层')
    resolve('第一层的resolve')
})
.then(res => {
    console.log('p..res', res);
    return new Promise((resolve, reject) => {
        console.log('这是什么');
        resolve(
            new Promise((resolve, reject) => {
                 console.log('继续嵌套。。。');
                 reject('经典折磨')
            })
        );
    })
}, err => {
    console.log('p..err', err);
})
.then(res => {
    console.log('第三层..res', res);
}, err => {
    console.log('第三层..err', err);
})

5 then 方法链式调用

var p = new Promise((resolve, reject) => {
    console.log('第一层')
    resolve('第一层的resolve')
})
p.then(res => {
    console.log('p..res', res);
    return '第二层..'
}, err => {
    console.log('p..err', err);
})
.then(res => {
    console.log('第三层..res', res);
}, err => {
    console.log('第三层..err', err);
})
var p = new Promise((resolve, reject) => {
    console.log('第一层promise');
    resolve(
        new Promise((resolve2, reject2) => {
            console.log('内部的promise');
            resolve2('这是内部的resolve');
        })
        .then(res => {
            console.log('内部的res', res);
            return '搞懂了吗';
        }, err => {
            console.log('内部的err', err);
        })
    )
})
p.then(res => {
    console.log('p..res', res);
}, err => {
    console.log('p..err', err);
})
var p = new Promise((resolve, reject) => {
    console.log('第一层promise');
    resolve(
        new Promise((resolve2, reject2) => {
            console.log('内部的promise');
            resolve2('这是内部的resolve');
        })
        .then(res => {
            console.log('内部的res', res);
            return '搞懂了吗';
        }, err => {
            console.log('内部的err', err);
        })
        .then((res) => {
            console.log('第三层res', res);
            return '第三层的onfill返回值'
        }, err => {
            console.log('第三层err', err);
        })
    )
})
p.then(res => {
    console.log('p..res', res);
}, err => {
    console.log('p..err', err);
})

5.1 resolve 结合 then链式调用经典折磨

var p = new Promise((resolve, reject) => {
    console.log('1........');
    resolve(
        new Promise((resolve1, reject1) => {
            console.log('2.......');
            resolve1('a')
        })
        .then(res => {
            console.log('3...res', res);
        }, err => {
            console.log('4...err', err);
        })
    );
})
.then(res => {
    console.log('5...', res);
    return new Promise((resolve, reject) => {
               console.log('6....');
               resolve('b')
           })
           .then(res => {
               console.log('7...', res);
               return 'c';
            }, err => {
               console.log('8...', err);
            })
}, err => {
    console.log('9...', err);
}).then(res => {
    console.log('10...', res);
}, err => {
    console.log('11...', err);
})

下面的都是Promise中几个高难度的题目

题目1

new Promise((resolve) => {
    console.log(1)
    resolve(4)
}).then(res => {
    console.log(2)
    return res;
}).then(res => {
    console.log(3)
})

new Promise((resolve) => {
    console.log(10)
    resolve(4)
}).then(res => {
    console.log(20)
    return res;
}).then(res => {
    console.log(30)
})

打印顺序: 1 10 2 20 3 30

我们将这个转换成下面这段代码一窥究竟:

const p1 = new Promise((resolve, reject) => {
    console.log(1)
    resolve(4)
})
const p2 = p1.then(function p1Fullfilled(res){
    console.log(2)
    return res
})
const p3 = p2.then(function p2Fullfillled(res){
    console.log(3)
})

const p10 = new Promise((resolve, reject) => {
    console.log(10)
    resolve(4)
})
const p20 = p10.then(function p10Fullfilled(res){
    console.log(20)
    return res
})
const p30 = p20.then(function p20Fullfilled(res){
    console.log(30)
})

下面按顺序执行代码,记住,所有的then注册的回调都是在微任务队列中执行的

先执行同步任务:

  • p1 执行器是同步执行,因此打印1,并且 p1状态改变成fullfilled
  • p1.then返回一个promise,即p2,由于p1状态已经改变,因此将p1的onFullfilled回调,即p1Fullfilled放入微任务队列中,此时微任务队列:[p1Fullfilled]
  • p2.then返回一个promise,即p3,由于p2的状态此时还是pending状态,因此p2的onFullfilled回调,即p2Fullfillled只会存入p2的回调列表中,而不是放入微任务队列
  • new Promise返回一个promise,即p10,同时打印10,并且p10状态变成fullfilled
  • p10.then返回一个promise,即p20,由于p10状态已改变,因此将p10的onFullfilled回调,即p10Fullfilled放入微任务队列中,此时微任务队列:

[p1Fullfilled, p10Fullfilled]

  • p20.then返回一个promise,即p30,由于p20的状态此时还是pending状态,因此p2的onFullfilled回调,即p20Fullfilled只会存入p20的回调列表中,而不是放入微任务队列
  • 至此所有同步任务已经执行完成,下面开始执行微任务队列中的任务:
  • 从微任务队列中取出p1Fullfilled并且执行,此时打印2,并且p2状态改变,因此将p2的回调放入微任务队列中,此时微任务队列:[p10Fullfilled, p2Fullfillled]
  • 从微任务队列中取出p10Fullfilled并执行,此时打印20,并且p20状态改变,因此将p20的回调放入微任务队列中,此时微任务队列:[p2Fullfillled, p20Fullfilled]
  • 重复上述步骤,依次执行p2Fullfillled,p20Fullfilled

题目2

new Promise((resolve) => {
    console.log(1)
    resolve(4)
}).then(res => {
    console.log(2)
    return new Promise(resolve => {
        console.log('2-1');
        resolve('2-1')
    });
}).then(res => {
    console.log(3)
})

new Promise((resolve) => {
    console.log(10)
    resolve(4)
}).then(res => {
    console.log(20)
    return res;
}).then(res => {
    console.log(30)
})

转换成下面的代码:

const p1 = new Promise((resolve, reject) => {
    console.log(1)
    resolve(4)
})
const p2 = p1.then(function p1Fullfilled(res){
    console.log(2)
    const p21 = new Promise((resolve, reject) => {
        console.log('2-1')
        resolve('2-1')
    })
    return p21
})
const p3 = p2.then(function p2Fullfillled(res){
    console.log(3)
})

const p10 = new Promise((resolve, reject) => {
    console.log(10)
    resolve(4)
})
const p20 = p10.then(function p10Fullfilled(res){
    console.log(20)
    return res
})
const p30 = p20.then(function p20Fullfilled(res){
    console.log(30)
})

这里打印顺序:1 10 2 2-1 20 30 3。

执行思路可以参考题目一拆解,这里需要额外注意的是,p1Fullfilled执行完返回的是promise p21,但此时p2的状态还不会改变,还是pending状态,此时 Promise内部会调用p21的then方法获取p21的状态并传递给p2,因此解析p21状态的这个任务会放入微任务队列中,也就是说,我们可以将上面的过程看成下面这样:

new Promise((resolve) => {
    console.log(1)
    resolve(4)
}).then(res => {
    console.log(2)
    return new Promise(resolve => {
        console.log('2-1');
        resolve('2-1')
    });
    // 和下面的返回效果相同
    // return new Promise(resolve => {
    //     console.log('2-1');
    //     resolve('2-1')
    // }).then(res => res);
}).then(res => {
    console.log(3)
})
// 可以看成下面的过程,then里面返回promise相当于delay两次then()的调用
new Promise((resolve) => {
    console.log(1)
    resolve(4)
}).then(res => {
    console.log(2)
    return '2-1'
}).then(res => res).then(res => res).then(res => {
    console.log(3)
})

题目3

new Promise((resolve) => {
    console.log(1)
    resolve(4)
}).then(res => {
    console.log(2)
    return new Promise(resolve => {
        resolve('2-1')
    }).then(res => res).then(res => res);
}).then(res => {
    console.log(3, res)
})
new Promise((resolve) => {
    console.log(10)
    resolve(4)
}).then(res => {
    console.log(20)
    return res;
}).then(res => {
    console.log(30)
}).then(res => {
    console.log(40)
}).then(res => {
    console.log(50)
}).then(res => {
    console.log(60)
})

题目4

Promise.resolve(Promise.resolve(4)).then((res) => {
    console.log(0);
    // return 4; // 对比一下这两种返回值的不同
    return new Promise((resolve) => { resolve(4) });
}).then((res) => {
    console.log(res)
}, err => {
    console.log(err)
})
Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() => {
    console.log(6);
})

题目5

Promise.resolve(Promise.resolve(4)).then((res) => {
    console.log(0);
    return new Promise((resolve) => { resolve(4) });
}).then((res) => {
    console.log(res)
}, err => {
    console.log(err)
})
Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() => {
    console.log(6);
})
Promise.resolve().then(() => {
    console.log(0);
    return Promise.resolve(4);
}).then((res) => {
    console.log(res)
})

Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() => {
    console.log(6);
})

打印顺序:0 1 2 3 4 5 6

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改