如果我们通常需要在继续之前处理一个承诺，为什么不返回一个已经处理的响应而不是一个承诺的响应呢？

Question

我已经阅读了很多内容并观看了视频，但遗憾的是还没有找到我的问题的答案。这让我觉得我的问题被误导了，但我想知道为什么。 （注意：我确实发现 this question 很有帮助，但答案似乎没有解决我的好奇心。）

---

如果我理解正确的话，promise 的作用并不是这样的：

朋友：听着，到最后，我会给你买一台电脑。这是一个承诺。

我：太棒了！当你这样做的时候，我会做很多其他的事情。

朋友（在一天结束时）：这是这个盒子。你只需要打开（处理）它。

我打开盒子，如果它是空的，我知道她的承诺已经失败（被拒绝）。如果里面有电脑，我知道她的承诺是成功的。而且，如果里面有一张纸条，上面写着“仍在努力履行这个承诺”，我知道她的承诺仍未完成。

---

相反，promise 的功能似乎是这样的：

朋友：听着，到最后，我会给你买一台电脑。这是一个承诺。

我：好的，我希望尽快使用那台计算机，因为我今天的所有任务都取决于它。我需要发送几封电子邮件，这将需要那台计算机。我需要研究获取请求，这也需要您的承诺。然后我需要在 StackOverflow 上问一个问题，这肯定需要那台机器。所以，我只是等到你的承诺成功或失败（或者你告诉我你需要更多时间）。

然后，朋友带着第一个场景中的同一个盒子回来，所以我需要先打开盒子（或处理承诺），然后才能执行任何进一步的任务。

---

那么，我的问题是，如果我们需要等待一个承诺响应，为什么该响应没有预先处理好？换句话说，为什么我的朋友递给我一个我必须打开的盒子，而不是递给我电脑或告诉我他们失败了（或者让我知道他们需要更多时间）？

当我发出提取请求时，我不能只使用响应。我需要先json() 它。或者，我需要先then() 和catch()。为什么我们返回承诺的数据而不是数据本身（当然，如果成功的话）？

我希望这个问题有意义。我期待我的假设得到纠正。

Answer 1

不，你的比喻不合适。没有“一天结束”，也没有“我需要打开盒子来检查它是否为空”。

承诺是你的朋友告诉你“我需要更多时间，但我保证最终会得到这个”。也许更重要的是，“完成后我会告诉你”。如果你想用一个盒子来比喻，它更像是一个盒子，上面有一张纸条，一旦里面有一台电脑，它就会自动打开。没有重复检查。

当然，您可以坐在那里什么也不做，只等盒子打开。但是被递给承诺箱意味着你的朋友不能立即把计算机递给你，而是需要更多的时间，所以你应该同时做一些其他的事情。那可能是向其他朋友要更多电脑。或者让本地图书馆为您提供一本关于要阅读的承诺书，以便您在拿到计算机后立即开始编程（无需等待对 SO 问题的回复）。当然，这意味着您将向您的客户承诺您的工作结果，这样即使您无事可做，只能等待被提取的计算机，他们 可能。

Answer 2

当我发出提取请求时，我不能只使用响应。我需要先 json() 它。或者，我需要先 then() 和 catch() 它。为什么我们返回承诺的数据而不是数据本身（如果成功，当然）？

您不能返回数据本身。主机函数本身在数据可用之前很久就返回了。这就是非阻塞、异步操作在 Javascript 中的工作方式。所以，在函数返回的时候，数据还没有到达。因此，您返回一个承诺，允许调用者将.then() 侦听器挂接到承诺，并在数据实际准备好或.catch() 侦听器时收到通知以查看是否有错误。

让我们看一个简单的例子。假设您有一个异步操作返回一些值。您想创建另一个函数，将该值平方并返回它。

// get random number between 0 and 9999
function rand() {
     return Math.floor(Math.random() * 10000);
}

function getValue() {
     console.log("5");
     return new Promise((resolve, reject) => {
         console.log("6");
         setTimeout(() => {
             console.log("7");
             resolve(rand());                 
             console.log("8");
         }, 500);
     });
}

function getSquaredValue() {
     console.log("3");
     return getValue().then(val => {
         console.log("4");
         return val * val;
     });
}

console.log("1");
getSquaredValue().then(val => {
    console.log("got value");
}).catch(err => {
    console.log(err);
});
console.log("2");

运行该脚本的输出如下：

1
3
5
6
2
7
8
4
got value

研究此顺序以遵循这些异步操作的流程。它应该是 1、3、5、6，因为这是函数调用的顺序。

但是，现在看看接下来会发生什么。是 2。这意味着 getSquaredValue() 已经返回。但是，我们还没有我们的随机数或其平方结果。这就是为什么你需要承诺。您返回承诺，调用者附加他们的.then() 侦听器。在未来某个未知的时间，当该值终于可用时，它会通知.then()监听器并告诉你最终的值是多少。

由于您创建了一些类比，我将自己制作一个。假设您正在建造一个储藏室。您确定需要一把新锤子，因此您在亚马逊上订购了一把。

在我们的世界中，从亚马逊交付新包裹是非阻塞和异步的。您在星期一提交订单并指定一天交货。您不必整天坐在门口等待包裹而无所事事。取而代之的是，您提交订单并立即进行其他项目，吃饭等……就好像什么都没发生一样。然后，在后台（无需您进一步关注），采购该产品、将其装入盒子并发送给您的整个过程正在进行。

然后，稍后某个时间（您指定了次日送达，所以应该是次日某个时间），门铃响起，表示包裹送达。当您有时间在做其他事情时，您会从其他任务中休息一下，然后从门口取包裹。

异步操作现已完成。完成后它会通知您，然后您可以获取该值。同时，在处理订单的所有时间，您都可能在做其他事情（非阻塞）。

Answer 3

您的标准 html + javascript 网站有效地在一个线程中运行。长时间运行的 javascript 任务将阻止 ui 接收输入或呈现更新。

网络请求最多可能需要几秒钟。如果我们必须等待 3 秒钟的结果，那么网站将被冻结 3 秒钟。相反，Web 请求在内部由一个单独的线程处理，并且当 Web 请求完成（成功或失败）时通知主 javascript 线程。

所以我们不能等待请求，因为它会冻结网站，但我们还需要能够在网络请求到达时接收到它的结果。普通的旧原始 javascript 执行此操作的方式是通过 Callback functions。 这是一个基本示例，说明它如何处理来自here 的 Web 请求：

//This function is called when the web request completes
function reqListener () {
   console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();

现在，这与 Promise 有什么关系？好吧，很多人不喜欢回调，很容易纠缠不清。 Promise 是旧的基于回调的方法的有效包装器。当 Promise 解决所有 .then() 的所有问题时，Promise 也可以轻松传递给其他功能和服务。

所以我们不能只等待数据的原因是因为它会冻结网站。我们使用 Promise 的原因是因为它们是旧回调样式方法的便捷包装器。

如果您的网站需要/关键的 Web 请求怎么办？那么你仍然不需要阻止。只需显示一个加载屏幕，当 Promise 返回时，您可以显示您的预期数据，如果失败则显示错误消息。重要的是，当请求处于待处理状态时，即使没有太多可显示的内容，站点也会保持响应。鼠标点击和滚动将注册，加载微调器将动画等。

Answer 4

Javascript 是同步运行的，Promise 是一种处理异步操作的方法。 你如何使用承诺来处理它？在.then()里面。

 ... sync code
 promise.then((someVar)=>{
     async code will run when the promise is fulfilled and someVar will be defined
 })
 ... sync code will run before the promise is fulfilled and someVar is not defined

您可以使用 async/await 语法将函数定义为异步函数，以实现您正在寻找的功能

async function someAsyncFunction() {
   ... sync code
   let someVar = await promise();
   ... async code will run when the promise is fulfilled and someVar will be defined
}