promise的一个简单例子
- 代码展示
Promise.resolve('foo')
.then(function (string) {
console.log(1);
return new Promise(function (resolve, reject) {
setTimeout(function () {
string += 'bar';
resolve(string);
}, 1);
});
})
.then(function (string) {
console.log(2);
setTimeout(function () {
string += 'baz';
console.log('2', string);
}, 1)
return string;
})
.then(function (string) {
console.log(3);
console.log('3', string);
});
- 打印输出:1,2,3,3 foobar, 2 foobarbaz
- 逻辑梳理:
- 里面出现了3个then函数,在主执行栈执行过程中,会把then里面的函数作为微任务逐次添加到微任务队列中。
如下 [ 微任务1, 微任务2, 微任务3] - 在主执行栈执行完成后,逐次执行微任务队列中的每一个任务。
- 这时候首先会输出 1,然后生成一个实例化 promise 实例,当做结果返回。在promise中,如果返回一个promise对象,后边的then函数都是依赖于次对象的。所以后边的then都是依赖第一个微任务返回的promise
- 当第一个返回promise后,微任务2开始执行,此时输出 2,然后生成一个setTimeout宏任务,返回结果
- 接受到微任务2的结果后,微任务3开始执行,此时输出 3,然后输出 3 foobar
- 当微任务执行完成后,此时执行宏任务队列,这里面只有一个,就是当时微任务2执行时添加的setTimeout,这是输出2 foobarbaz。
- 注意知识点:一般都是微任务先执行,然后再执行宏任务,但是在promise里面的宏任务函数,必须先执行完,才能往下执行