关于多个Promise对象及then()函数的执行顺序的研究记录

前端开发Kingcean 2020-03-03

今天终于想要研究一下多个 Promise 对象的执行顺序问题了,在研究完后记录一下。

我想研究的是以下问题:

1、多个 Promise 对象及其then函数的执行顺序,这里不研究处于不同状态的 Promise 对象的执行顺序

2、在 Promise 中的定时器延时问题(这个问题其实在 MDN 和阮一峰老师的 ES6 入门中都讲过,只是我光看文字有点晕,所以自己写代码来理解)

废话不多说,先上代码吧

// 延时执行
new Promise(resolve => setTimeout(() => {
    resolve()
}, 1000))
.then(() => console.log(‘我是延时执行的‘))
.catch(e => console.error(e))
// 在第二个then()函数运行时打印
new Promise(resolve => resolve()).then(() => ‘这是第三步打印的‘)
.then(value => console.log(value))
.catch(e => console.log(‘错误是:‘+e))
// 在第二个then()函数运行时打印,与上一个Promise不同的是令Promise变成fulfilled状态的方法不同
Promise.resolve().then(() => ‘这也是第三步打印的‘)
.then(value => console.log(value))
.catch(e => console.log(‘错误是:‘+e))
// 在第二个then()函数运行时打印
new Promise(resolve => resolve()).then(() => ‘这还是第三步打印的‘)
.then(value => console.log(value))
.catch(e => console.log(‘错误是:‘+e))
// 在第一个then()函数运行时打印
const p = value => {
    return new Promise(resolve => resolve(value))
}
p(‘这是第二步打印的‘).then(value => console.log(value))
// 在第一个then()函数运行时打印
new Promise(resolve => resolve()).then(() => console.log(‘这也是第二步打印的‘))
.catch(e => console.log(‘错误是:‘+e))
// 在Promise构造函数执行时打印
new Promise(() => console.log(‘这是第一步打印的‘))
.catch(e => console.error(e));
// 非异步打印
console.log(‘这不在Promise中‘);

代码的运行结果如下

 关于多个Promise对象及then()函数的执行顺序的研究记录

 那么,根据打印的结果,我理解的 Promise 的执行逻辑是:

1. 按同步的运行顺序,执行 Promise 的构造函数

2. 将所有 Promise 构造函数后的第一个 then() 函数放入异步队列中(如果存在的话)

3.1 将所有 Promise 构造函数后的第二个 then() 函数放入异步队列中(如果存在的话)

3.2 执行异步队列中的 then() 函数

注:3.1 与 3.2 是我搞不清楚具体的执行顺序,猜测的可能的执行方式,因为我觉得两种执行顺序的结果相同,所以就当作是两种分支看待好了,以下的 .1 与 .2 对应 3.1 与 3.2

4.1 将所有 Promise 构造函数后的第 X 个 then() 函数放入异步队列中,重复执行直到所有 then() 函数已放入异步队列中,执行异步队列中的 then() 函数

4.2 将所有 Promise 构造函数后的第X个 then() 函数放入异步队列中(如果存在的话),执行异步队列中的 then() 函数,重复该步骤直到所有 then() 函数均已执行完毕。

另外,当在 Promise 中使用定时器时,会在定时器结束后令后一个 then() 函数进入异步队列。

相关推荐