这个 Promise 示例究竟是如何工作的？答案

【问题标题】：How exactly does this promise example work?这个 Promise 示例究竟是如何工作的？
【发布时间】：2018-03-03 20:06:54
【问题描述】：

我正在学习 Angular 2，我对在教程中找到的这段代码有疑问：

  appStatus = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('stable');
    }, 2000);
  });

我知道这条指令做了这样的事情：在 2 秒后将 appStatus 变量的值设置为字符串 'stable'。是这个吗？

但是 Promise 到底是什么？所以 appStatus 变量包含一个 Promise 对象引用，我认为它会在 2 秒后包含 'stable' 解析值。但究竟是什么，包含什么？

Promise的常见用例是什么？

【问题讨论】：

另一个很好的阅读来源developers.google.com/web/fundamentals/getting-started/primers/…
appStatus.then((val) => console.log(val)); //两秒钟后会给你'稳定'

标签： javascript promise javascript-framework

【解决方案1】：

appStatus 值不会像您想象的那样是字符串 'stable'。 appStatus 值在这里是一个承诺对象，它向您承诺字符串“稳定”（您将在 2 秒后得到它）。要从 Promise 中获取值 'stable'（您将在 2 秒的持续时间结束时得到它），您必须这样做：

appStatus.then((result) => { console.log(result); });

【讨论】：

好的...我知道 appStatus 包含一个 Promise 对象引用，但是...当您说：“承诺在 2 秒后给您字符串 'stable'”时，您的意思是什么？这个“稳定”值存储在哪里？进入 Promise 对象字段？
上面有几个关于promise如何工作的深度链接，我建议你阅读它们。 Faly 已回答您的问题。
@AndreaNobili 一旦解决就会回调。它没有存储在任何地方。您在 .then() 中收到值。你自己在这里回调值 resolve('stable');你也可以拒绝('unstable'); with 将是另一个回调函数，即您的错误接收器。

【解决方案2】：

在 JS 的很多方面都使用了 Promises，角度是一个小例子。长话短说，Promise 是 .thenable 对象。例如，如果您曾经使用过 xhr (XMLHttpRequest)，您可以认为 .then(x) 的作用类似于 xhr.onload = x，但这种构造允许更强大的代码。这两段代码执行的方式非常相似：

// callback "format"
const xhr = new XMLHttpRequest;
xhr.open('GET', '/api/some-query');
xhr.onload = () => { console.log(xhr.response); };
xhr.send();

// promise "format"
const xhrPromise = new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest;
  xhr.open('GET', '/api/some-query');
  // bad error handling, but proves the point
  xhr.onload = () => { resolve(xhr.response); };
  xhr.send();
});
xhrPromise.then((text) => { console.log(text); });

您所拥有的是使用承诺模式。为了更容易理解，这里有一个类似的使用回调模式的片段：

setTimeout(() => { f('stable') }, 2000);

这是假设您将其附加到当前代码：

appStatus.then((status) => { f(status) });

这如何变得更好可能一开始还不清楚，但是一旦你深入研究它并发现 Promise 是可链接的 (appStatus.then(...).then(...))，错误处理如何与 .catch 和类似的一起工作，很容易陷入困境爱上他们了

有很多很好的读物可以了解 Promise 的工作原理，例如 the MDN docs 和 this post by Jake Archibald

【讨论】：