深入理解 Promise

前言

对于前端开发者们来说，ES6 的学习已经成为必然，其中的 Promise 更是频繁出没于各大面试题，因此了解 Promise 已经不能简简单单的会用，更需要深入原理。《ES6 入门教程》其中对 Promise 的讲解已经能满足业务场景的需要，来源和基础使用此篇就不做赘述，只是记录一下 Promise 的一些边角知识和我的一些心得体会。

事件循环

深入了解 Promise 之前，我们需要对 JavaScript 的“事件循环（Event Loop）”机制有一定的了解。那么什么是“事件循环”呢？这个如果细说的话又能开一个系列，这里只简单的描述一下。

在 JavaScript 中任务分为两种：宏任务（Task）、微任务（MicroTask）。在主线程运行的时候，同步任务会直接运行，异步任务则会根据其类型分别进入“宏任务队列”和“微任务队列”，在同步任务执行完毕后，会先清空“微任务队列”，然后再清空“宏任务队列”，其大致的运行图如下：

⚠️ 注意：一般情况下，异步任务都是按顺序依次执行，但同样也存在一些“插队”执行的现象，特别是两异步任务同时执行的情况下，因处理时间的不同可能会出现意料之外的结果。

『图片引用自博客：https://www.cnblogs.com/weiyongchao/p/13766429.html』

案例简析

了解了“事件循环”后，我们基本明白了 JavaScript 代码的执行机制，Promise 在其中扮演的是一个“微任务”，基于此，我们分析几个案例来一步步了解 Promise。

Promise 状态

众所周知，Promise 有三种状态：pending、fulfilled 和 rejected，代码尝试如下：

const p = new Promise((res, rej) => {
  setTimeout(() => {
    res();
  }, 3000);
});

console.log(p);

console.log(Promise.resolve());
console.log(Promise.reject());

// 浏览器中运行结果：
// Promise { <pending> }
// Promise {<fulfilled>: undefined}
// Promise {{<rejected>: undefined}}

Promise 内的执行函数是同步任务

很多新手容易弄混的部分是“Promise 是异步函数，因此它初始化传入的执行函数属于异步任务”，同样用代码来解释：

console.log('start');

const p = new Promise((res, rej) => {
  console.log('working...');
  res();
});

console.log('end');

// 浏览器中的运行结果：
// start
// working...
// end

Promise 状态不可逆

除了最开始的 pending 态外，一旦转变为 fulfilled 或 rejected 状态后，其状态就不会再改变了：

const p = new Promise((res, rej) => {
  res(1);
  rej(2);
});

console.log(p);

// 浏览器中的运行结果：
// Promise {<fulfilled>: 1}

then 链返回的是新 Promise 对象

then 链中，无论你返回什么内容，它都会给你给你包装一个 Promise 的外壳：

const p = new Promise((res, rej) => {
  res();
});

console.log(p.then());
console.log(p.then(() => 1));
console.log(
  p.then(
    () =>
      new Promise((res, rej) => {
        res();
      }),
  ),
);

// 浏览器中的运行结果：
// Promise {<pending>}
// Promise {<pending>}
// Promise {<pending>}

then 链有两个函数，第二个 onReject 函数如果有设置，那么其后续会返回至 fulfilled 状态链：

new Promise((res, rej) => {
  rej(1);
})
  .then(
    res => {},
    rej => {
      console.log('err', rej);
      // return 2
    },
  )
  .then(res => {
    console.log('success', res);
  });

// 浏览器中的运行结果：
// err 1
// success undefined

⚠️ 注意：在日常开发中不要设置 then 链的 onReject 函数，说不定那天就因为常规思维而被它给坑了 (´∇ ｀)。

then 链是可透传的

当 then 链内的内容为非函数的情况下，其会将上一个 Promise 的结果和状态传递给下一个函数：

Promise.resolve('start')
  .then(console.log('pass'))
  .then(res => console.log(res));

// 浏览器中的运行结果：
// pass
// start

【小贴士】其实工作中经常会用到这个特性，比如 then 链默认不写第二个函数，从而使用 catch 在 then 链末尾单独对错误进行处理，当然 catch 的返回值默认也是 fulfilled 状态哟。

【拓展】finally 效果与“then 链透传”一致，仅多了内部函数执行，感兴趣的可自行尝试一下～

案例深入

嵌套 Promise，then 链返回非 Promise 结果

刚刚聊的都是较为基础的例子，想要捋清 Promise 的知识可能还需要一些稍有难度的案例，这样才能加深对它的印象。那么看一下这个嵌套 Promise 的例子，弄懂了它，基本上就能对 Promise 有一定的理解了，不会被大多数的面试题给难住：

Promise.resolve()
  .then(() => {
    console.log('1-1');

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

    return 'Anything except promise func, also no "return"';
  })
  .then(() => {
    console.log('2-1');
  });

这里注意到，我们在第一个 then 链内调用了一个新的 Promise 方法，但没有返回值，那么运行的结果会是顺序执行吗？在浏览器上运行得到的结果为：

1-1
1-2
1-3
2-1
1-4

可以看到 “2-1” 在 “1-4” 之前打印了，可这又是为什么呢？让我们一步步分析来看：

• 【Step1】then 链先打印 1-1，然后进入 Promise 函数内；
• 【Step2】打印 Promise 内部的 1-2，执行 resolve 函数，并将紧接着的 then 链存入微任务事件队列；
• 【Step3】跳出 Promise 并运行至 then 链结尾，无返回值，默认 resolve 处理并将下一个 then 链存入微任务队列；
• 【Step4】此时微任务队列有俩微任务，依次执行处理，后续内容就是依次打印 1-3 和 2-1 ，最后再打印 1-4 了；

微任务队列内容变化如下：

/** 每步微任务队列内容 */
【Step 1】
[
  then(() => {
    console.log('1-1');
    new Promise((res, rej) => {
      console.log('1-2');
      res();
    })
      .then(() => {
        console.log('1-3');
      })
      .then(() => {
        console.log('1-4');
      });
  }).then(() => {
    console.log('2-1');
  }),
]

【Step2】
[
  (then(() => {
    console.log('1-3');
  }).then(() => {
    console.log('1-4');
  }),
  then(() => {
    console.log('2-1');
  }))
]

【Step3】
[
  then(() => {
    console.log('1-4');
  })
];

从此结果我们可以了解到，在无返回值的情况下最好不要在内部处理别的 Promise 函数并接上 then 链来达到步骤控制，很容易会出现一些意想不到的问题。在业务中，很容易就会写出这样的代码，如：

// 加入 http 是封装好的 Axios 文件
const initFunc = async () => {
  // 等初始化
  await http.post('getInfo').then(info => {
    const { userId, userRightIds } = info;

    // 获取用户信息
    http.post('getUserInfo', { userId }).then(() => {
      /* 处理用户信息 */
    });

    // 获取用户信息
    http.post('getRightList', { userRightIds }).then(() => {
      /* 处理权限信息 */
    });
  });

  // 初始化后处理别的事
  // ...（电脑前，为什么没拿到权限数据和用户信息？？？弄个 setTimeout 吧）}
};

模拟请求的代码如下：

async function test() {
  let testVal = 1;

  await Promise.resolve().then(() => {
    // 加长 then 链模拟请求的耗时
    Promise.resolve()
      .then()
      .then()
      .then()
      .then()
      .then()
      .then(() => {
        testVal = 2;
      });
  });

  console.log(testVal);
}

test();
// 结果是：1

所以，业务代码内尽量不要嵌套写 Promise，用 async/await 拆拆，或者每个内部 Promise 函数加上对应的 async/await 方法令其执行完再做其它操作，这样就不会写出 bug 了。

嵌套 Promise，then 链返回 Promise 结果

当然，嵌套 Promise 也是有坑存在的，说不定那天面试也会面到，当然项目内是不会出现这种写法的（有的话那么需要问问是谁面他进来的，同时还得考虑考虑是否继续和他共事），返回 Promise 结果的例子咱先不看，先分解一下，看如下例子：

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

Promise.resolve()
  .then(() => {
    console.log('2-1');
  })
  .then(() => {
    console.log('2-2');
  })
  .then(() => {
    console.log('2-3');
  }); // 浏览器结果为（就不换行输出了）：// 1-1   2-1   1-2   2-2   1-3   2-3

这结果想必难不倒大家，可以很轻松的解答出来，那么再代入嵌套的例子看看，应该就好分析了：

Promise.resolve()
  .then(() => {
    // 别名: then1
    Promise.resolve()
      .then(() => {
        console.log('1-1');
      })
      .then(() => {
        console.log('1-2');
      })
      .then(() => {
        console.log('1-3');
      });
    // 别名 then2
    return Promise.resolve()
      .then(() => {
        console.log('2-1');
      })
      .then(() => {
        console.log('2-2');
      })
      .then(() => {
        console.log('2-3');
      });
  })
  // 别名 then3
  .then(() => {
    console.log('3-1');
  });

// 浏览器结果为（就不换行输出了）：
// 1-1   2-1   1-2   2-2   1-3   2-3    3-1

因为 then3 依赖 then2 的状态改变，而 then2 又需要和 then1 抢微任务队列的资源，因此返回的结果就是交替的结果，3-1 最后打印。

但是，我们把 then2 链精简一下，只留一个 2-1，按道理来说 3-1 应该在 1-2 之后打印的，但实际结果如下：

Promise.resolve()
  .then(() => {
    // 别名: then1
    Promise.resolve()
      .then(() => {
        console.log('1-1');
      })
      .then(() => {
        console.log('1-2');
      })
      .then(() => {
        console.log('1-3');
      });
    // 别名 then2
    return Promise.resolve().then(() => {
      console.log('2-1');
    });
  })
  // 别名 then3
  .then(() => {
    console.log('3-1');
  });

// 浏览器结果为（就不换行输出了）：
// 1-1   2-1   1-2   1-3   3-1

为什么和预测结果不一样了呢？其实此问题的问题点并不在 Promise 身上，听我一一分析。

首先，在 then2 打印 2-1 后，其会返回一个新的 Promise 对象放入微任务队列，它的返回值为 undefined

然后 then1 打印 1-2 并将 1-3 所在 then 链传入

紧接着 这个返回值为 undefiend 的 Promise 对象执行，然后返回一个 undefiend 值，这就回到上面返回值为非 Promise 的情形了，紧接着 then3 就放入了微任务队列

在看微任务队列，发现 then3 就在 then1 那最后一个链之后，那结果就呼之欲出了。

代码解如下：

【Step1】
[
  // then1
  then(() => { console.log('1-1'); })
    .then(() => { console.log('1-2'); })
    .then(() => { console.log('1-3'); }),
  // then2 的 then 链会包裹 Promise 对象，因为 then 链不论 return 的是什么，它都会返回一个 Promise
  Promise.resolve(then(() => { console.log('2-1'); }))
]
【Step2】
[
  // then1
  then(() => { console.log('1-2'); })
    .then(() => { console.log('1-3'); }),
  // then2
  Promise.resolve(undefined)
]
【Step3】
[
  then(() => { console.log('1-3'); }),
  then(() => { console.log('3-1'); })
]

此需要注意的是，then 链处理返回结果为 Promise 类型时，其会多一个 Promise.resolve(undefined) 的隐藏链。
当然，如果 then2 直接返回一个 Promise.resolve() 其结果仍然是一样的，这就涉及到任务队列的插队问题了，因为我们返回的是一个新的 Promise 对象，这和原来的 Promise 链还是有一点区别的，这里只需要记住，最多差两条链的结果就行，没有深究的必要（实际项目也不会遇到这个问题）

参考文章

• Promise A+ 规范
• Promise 注册微任务和执行过程
• 一次弄懂 Event Loop（彻底解决此类面试问题）
• 动图学 JavaScript 之：事件循环（Event Loop）
• 【图解】浏览器及 nodeJS 中的 EventLoop 事件循环机制