关于javascript:如果await-同一个-Promise-两次会怎么样

10次阅读

共计 1741 个字符，预计需要花费 5 分钟才能阅读完成。

先看上面这道面试题：

let counter = 0;
const increment = new Promise(resolve => {
  counter++;
  resolve();});
await increment;
await increment;
console.log(counter); // 后果是什么？

你认为 counter 的值是什么？

什么是 promise？这是否意味着“稍后再做”？

实际上应该把 promise 看成是一个状态机。

promise 以“pending”状态开始它的生命周期。如果你要在这个状态下查问后果，则必须排队。

依据 ECMAScript 规范文档中的形容（https://tc39.es/ecma262/），下面 Promise 构造函数会立刻调用咱们的执行器函数。它的 counter++ 副作用运行。不带任何参数调用 resolve()，在 promise 上存储一个 undefined 后果，并将其状态晋升为“fulfilled”。

第一个 await 运行。await 等同于在你的 promise 上运行 .then(onFulfilled)，将 onFulfilled 设置为“后面的代码”。这项工作作为微工作进入队列。JavaScript 以先进先出的程序执行微工作；管制最终返回给咱们的函数。

第二个 await 没有什么不一样的中央。它创立一个微工作给我 promise 的后果并提前运行代码，而后期待 JavaScript 进行调度。

副作用只在 Promise 构建期间运行过一次，所以 counter 为 1.

咱们推延了工作吗？没有。promise 是同步创立和执行的。然而咱们应用了 await 来解决其余微工作。

那么应该怎么推延工作？

const microtask = Promise.resolve()
.then(() => console.log('hello from the microtask queue'));

const macrotask = new Promise(resolve =>
  // 排队宏工作
  setTimeout(() => {console.log('hello from the macrotask queue');
    resolve();})
  // 没有解决，promise 仍处于 pending 状态
);

// 这是最先输入的；咱们胜利地推延了工作
console.log('hello from the original execution context');

// yield 调度器; 运行 .then() 并输入日志
await microtask;
// yield 调度器;  promise 的状态是 fulfilled，所以没有日志输入
await microtask;

// yield 调度器; 执行所有微工作，而后运行宏工作并输入日志
await macrotask;
// yield 调度器; promise 曾经实现，所以没有日志输入
await macrotask;

Promise 构造函数是同步运行的，然而咱们不用同步调用 resolve()。Promise.prototype.then 也推延了工作。

Promise 构造函数和 Promise.prototype.then 都不会反复工作。

这意味着 promise 能够用来记住异步计算。如果你用了一个 promise，而且想要稍后再次用到它的后果，应该思考保留 promise 而不是它的后果。