[JavaScript]_ 认识Promise (四)

这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」。

书接上回 认识Promise(三)

非重入方法

先来做一道题，猜猜下面打印输出的顺序是什么样？

console.log(1);
setTimeout(function(){
    console.log(2);
},0);
new Promise(function(resolve){
    console.log(3);
    resolve()
}).then(function(){
    console.log(4);
})
console.log(5);
setTimeout(function(){
    new Promise(function(resolve){
        console.log(6);
        resolve()
    }).then(function(){
        console.log(7)
    })
},0)

上面的打印顺序就是1354267，你做对了吗？

解题思路：

• Promise 创建后会立即执行
• Promise 的初始化处理程序(执行器函数)是同步执行的，只有resolve或reject时会触发异步操作（只能通过它自己的实例方法捕获）。
• 异步任务，Promise 属于微任务（microtasks），setTimeout 属于宏任务（macrotasks）
• JS中的异步IO、回调、Eventloop
• 异步任务等待同步任务执行完；宏任务的优先级高于微任务，但下一宏任务执行前，要先清空当前的微任务队列

console.log(1)
new Promise(function(resolve){
    console.log(2);
    resolve()
    console.log(3);
}).then(function(){
    console.log(4);
})
console.log(5);

// 1 2 3 4 5

Promise 中的then()、catch()、finally()方法的处理程序都是非重入的； 其处理程序会等到当前线程中同步代码执行完后才执行。

多个处理程序

let p = Promise.resolve(1);
p.then((e)=> {
    console.log('then1',e)
})
.then((e)=> {
    console.log('then2',e);
    return 2
})
.then((e)=> {
    console.log('then3',e)
})

执行结果： 上面代码中，初始解决结果1，执行第一个then方法没有返回值默认包装undefined; 第二个then 返回2。

如果给Promise添加了多个处理程序, 会按照添加他们的顺序依次执行，无论是 then()、catch()还是 finally()添加的处理程序都是如此。

let p = Promise.resolve(1);
p.then((e)=> {
    console.log('then1',e)
    return Promise.reject('err')
})
.then((o) => {
    console.log('then2resolve', o)
},
(e)=> {
    console.log('then2',e);
    return 2
}).catch((e)=> {
    console.log('catch', e)
}).finally((e)=> {
    console.log('finally', e)
})

执行结果：