promise链式调用_聊一聊：一道 Promise 链式调用的题目

问题

这是最近几天在掘金沸点看到的一道题目：

new Promise((resolve,reject) => {
    
    console.log('外部promise')
    resolve()
})
    .then(() => {
    
    console.log('外部第一个then')
    new Promise((resolve,reject) => {
    
        console.log('内部promise')
        resolve()
    })
        .then(() => {
    
        console.log('内部第一个then')
        return Promise.resolve()
    })
        .then(() => {
    
        console.log('内部第二个then')
    })
})
    .then(() => {
    
    console.log('外部第二个then')
})
    .then(() => {
    
    console.log('外部第三个then')
})
    .then(() => {
    
    console.log('外部第四个then')
})

// 输出结果是什么？

第一眼看到的时候，你觉得输出结果是什么呢？可以先花几分钟仔细想一想。

........

........

........

........

........

公布答案：

外部promise
外部第一个then
内部promise
内部第一个then
外部第二个then
外部第三个then
外部第四个then
内部第二个then

不知道你有没有猜对？反正我猜错了。一开始我还以为是常规的 EventLoop 题目，无非就是考链式调用。但事实证明，它没有看上去那么简单。当时心里想的是，好奇怪，怎么和预想的不一样呢？

吃个午饭回来，本想继续看评论里有没有大神指点迷津或者是一起讨论下这道题，没想到的是，大神没出现，倒是出现了不少冷嘲热讽的人，大意是“写这样的代码就是菜，没有意义，不要浪费别人的时间”。又过了几分钟，发现楼主已经把帖子给删了。

...... 一时之间不知道说什么好，等到文章结束再来聊聊吧，我们还是先回到问题上。尽管这样的代码可能只是“为了面试而生”的，但我还是想弄清楚是怎么一回事，为何结果与猜想的不一样，于是这几天一直在翻阅网上的资料，请教网友们。到了今天，算是有点眉目了，所以在这里记录一下具体的分析过程。

「注意：」

• 问题的解答来源于网上的相关文章和回答，我只是在此基础上整理分析思路和过程
• 文章不会讨论 Promise/A+ 实现，ECMAScript 规范解读，webkit 源码等内容，但底下会有相关链接，想继续深挖的朋友可以看看

先从简单的开始分析

在讨论这段代码之前，我们先从一段相对简单的代码开始分析：

new Promise((resolve,reject)=>{
    
   console.log("promise1")
   resolve( )
})
.then(()=>{
    
   console.log("外部第一个then")
   new Promise((resolve,reject)=>{
    
     console.log("promi