理解 Javascript 中的 Promise

阿里云最近在做活动，低至2折，有兴趣可以看看：
https://promotion.aliyun.com/...

为了保证的可读性，本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

图片描述

背景

当你第一次开始使用JavaScript时，它会有点令人沮丧。你会听到有些人说JavaScript是同步编程语言，而其他人则认为它是异步的。你会听到阻塞代码，非阻塞代码，事件驱动设计模式，事件生命周期，函数堆栈，事件队列，冒泡，polyfill，babel，angular，reactJS，vueJS 以及大量其他工具和库。不要烦恼，你不是第一个。这也有一个术语，它被称为 JavaScript 疲劳。

JavaScript疲劳: 当人们使用不需要的工具来解决他们没有的问题时，就会出现JavaScript疲劳

JavaScript是一种同步编程语言。但是由于回调函数，我们可以使它像异步编程语言一样工作。

初学者的 Promise

JavaScript中的 promise 与现实生活中的承诺非常相似。首先让我们看看现实生活中的承诺。

promise 词典中的定义：保证某人会做某事或某件事会发生。

那么当有人向你承诺时，会发生什么呢?

承诺给你一个将会有所作为的保证。他们(做出承诺的人)是自己做还是别人做，这无关紧要。他们给你一个保证，在此基础上你可以计划一些事情。
诺言可以遵守，也可以违背。
当一个承诺被遵守时，你期望从这个承诺中得到什么。你可以利用承诺的结果来做进一步的行动或计划。
当一个承诺被打破时，你会想知道为什么做出承诺的人不能履行他的承诺。一旦你知道了原因，并确认承诺已经被打破，你就可以计划下一步要做什么或如何处理它。
在作出承诺的时候，我们所拥有的只是一种保证。我们不能立即采取行动。我们可以决定和制定当承诺被遵守(因此我们有了预期的结果)或违背(我们知道原因，因此我们可以计划一个意外事件)时需要做什么。
有可能你根本就没有收到承诺人的回复。在这种情况下，您宁愿保留一个时间阈值。如果承诺的人10天后不回来找我，我会认为他有一些问题，不会遵守他的承诺。所以即使那个人在15天后回到你身边，这对你来说也不再重要，因为你已经有了其他的计划。

JavaScript中的 Promise

根据经验，对于JavaScript，我总是阅读来自MDN Web文档的文档。在所有资源中，我认为它们提供了最简洁的细节。我阅读了来自 MDSN Web文档的promise 介绍，并尝试了一些代码来掌握它。

理解承诺有两个部分。“创建 promises” 和 “处理 promises”。虽然我们的大多数代码通常会迎合其他库创建的 promises 的处理，但完全理解这些 promises 肯定会有所帮助。一旦你过了初学阶段，理解“创造promises ”同样重要。

Promise 创建

让我们看一下创建新promis的语法

图片描述

构造函数接受一个名为executor 的函数。此执行函数接受两个参数 resolve 和 reject，它们f都是函数。 Promise 通常用于更容易处理异步操作或阻塞代码，其示例包括文件操作，API调用，DB调用，IO调用等。这些异步操作的启动发生在执行函数中。如果异步操作成功，则通过 promise 的创建者调用resolve 函数返回预期结果，同样，如果出现意外错误，则通过调用 reject 函数传递错误具体信息。

图片描述

var keepsHisWord;
keepsHisWord = true;
promise1 = new Promise(function(resolve, reject) {
  if (keepsHisWord) {
    resolve("小智承诺坚持分享好的东西给大家");
  } else {
    reject("我没有做到！");
  }
});
console.log(promise1);

图片描述

由于该 promise 会立即执行，我们将无法检查该 promise 的初始状态。因此，让我们创造一个需要时间来执行的 promise，最简单的方法是使用 setTimeOut 函数。

图片描述

promise2 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve({
      message: "小智承诺坚持分享好的东西给大家",
      code: "200"
    });
  }, 10 * 1000);
});
console.log(promise2);

上面的代码只是创建了一个在10秒后无条件执行 promise。因此，我们可以检查promise 的状态，直到它被 resolve。

图片描述

一旦十秒钟过去，promise 就会执行 resolve。PromiseStatus 和 PromiseValue 都会相应地更新。如你所见，我们更新了 resolve 函数，以便传递 JSON 对象，而不是简单的字符串。这只是为了说明我们也可以在 resolve 函数中传递其他值。

图片描述

现在让我们看看一个 promise reject的例子。我们只要修改一下 keepsHisWord:

图片描述

我们可以看到 PromiseStatus 可以有三个不同的值，pending（进行中）、 resolved（已成功）或 rejected（失败）。创建 promise 时，PromiseStatus 将处于 pending 状态，并且 PromiseValue 为 undefined，直到 promise 被 resolved 或 rejected 为止。当 promise 处于 resolved 或 rejected 的状态时，就称为 settled（已定型）。所以 promise 通常从 pending 态转换到 settled 状态。

既然我们知道 promise 是如何创建的，我们就可以看看如何使用或处理 promise。这将与理解 Promise 对象密切相关。

理解 Promise 对象

根据 MDN 文档

Promise 对象表示异步操作的最终完成(或失败)及其结果值

Promise 对象具有静态方法和原型方法，Promise 对象中的静态方法可以独立应用，而原型方法需要应用于 Promise对象的实例。记住，普通方法和原型都返回一个 romise，这使得理解事物变得容易得多。

原型方法(Prototype Methods)

让我们首先从原型方法开始，有三种方法。重申一下，记住所有这些方法都可以应用于 Promise 对象的一个实例，并且所有这些方法依次返回一个 Promise。以下所有方法都为 promise 的不同状态转换分配处理程序。正如我们前面看到的，当创建一个 Promise 时，它处于 pending 状态。Promise 根据是否 fulfilled（已成功）或rejected（已失败），将运行以下三种方法中的一种或多种。

Promise.prototype.catch(onRejected)

Promise.prototype.then(onFulfilled, onRejected)

Promise.prototype.finally(onFinally)

下图显示了 then 和 .catch 方法的流程。由于它们返回一个 Promise ，它们可以再次被链式调用。不管 promise 最后的状态，在执行完t hen 或 catch 指定的回调函数以后，都会执行finally方法指定的回调函数。

图片描述

这里有一个小故事。你是一个上学的孩子，你问你的妈妈要一个电话。她说:“这个月底我要买一部手机。”

让我们看看，如果承诺在月底执行，JavaScript中会是什么样子。

图片描述

var momsPromise = new Promise(function(resolve, reject) {
  momsSavings = 20000;
  priceOfPhone = 60000;
  if (momsSavings > priceOfPhone) {
    resolve({
      brand: "iphone",
      model: "6s"
    });
  } else {
    reject("我们没有足够的储蓄，让我们多存点钱吧。");
  }
});
momsPromise.then(function(value) {
  console.log("哇，我得到这个电话作为礼物 ", JSON.stringify(value));
});
momsPromise.catch(function(reason) {
  console.log("妈妈不能给我买电话，因为 ", reason);
});
momsPromise.finally(function() {
  console.log(
    "不管妈妈能不能给我买个电话，我仍然爱她"
  );
});

输出：

图片描述

如果我们把妈妈的礼物价值改为20万美元，那么妈妈就可以给儿子买礼物了。在这种情况下，输出将是

图片描述

接着 then方法的第一个参数是 resolved 状态的回调函数，第二个参数（可选）是 rejected 状态的回调函数。所以我们也可以这样写：

图片描述

但是为了代码的可读性，我认为最好将它们分开。

为了确保我们可以在浏览器中运行所有这些示例，或者在chrome中运行特定的示例，我要确保我们的代码示例中没有外部依赖关系。

为了更好地理解进一步的主题，让我们创建一个函数，该函数将返回一个 Promise，函数里随机执行 resolve 或者 rejected ，以便我们可以测试各种场景。

由于我们需要随机数，让我们先创建一个随机函数，它将返回x和y之间的随机数。

图片描述

让我们创建一个函数，它将为我们返回 promise。让我们调用 promiseTRRARNOSG 函数，它是promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator 的别名。这个函数将创建一个 promise，该 promise 将在 2 到 10 秒之间的随机数秒后执行 resolve 或 reject。为了随机执行resolve 和 reject，我们将创建一个介于 1 和 10 之间的随机数。如果生成的随机数大于 5，我们将执行 resolve ，否则执行 reject。

图片描述

function getRandomNumber(start = 1, end = 10) {
  //works when both start and end are >=1
  return (parseInt(Math.random() * end) % (end - start + 1)) + start;
}
var promiseTRRARNOSG = (promiseThatResolvesRandomlyAfterRandomNumnberOfSecondsGenerator = function() {
  return new Promise(function(resolve, reject) {
    let randomNumberOfSeconds = getRandomNumber(2, 10);
    setTimeout(function() {
      let randomiseResolving = getRandomNumber(1, 10);
      if (randomiseResolving > 5) {
        resolve({
          randomNumberOfSeconds: randomNumberOfSeconds,
          randomiseResolving: randomiseResolving
        });
      } else {
        reject({
          randomNumberOfSeconds: randomNumberOfSeconds,
          randomiseResolving: randomiseResolving
        });
      }
    }, randomNumberOfSeconds * 1000);
  });
});
var testProimse = promiseTRRARNOSG();
testProimse.then(function(value) {
  console.log("Value when promise is resolved : ", value);
});
testProimse.catch(function(reason) {
  console.log("Reason when promise is rejected : ", reason);
});
// 创建10个不同的promise
for (i=1; i<=10; i++) {
  let promise = promiseTRRARNOSG();
  promise.then(function(value) {
    console.log("Value when promise is resolved : ", value);
  });
  promise.catch(function(reason) {
    console.log("Reason when promise is rejected : ", reason);
  });
}

刷新浏览器页面并在控制台中运行代码，以查看resolve 和 reject 场景的不同输出。

静态方法

Promise对象中有四种静态方法。

前两个是帮助方法或快捷方式。它们可以帮助您轻松创建 resolved 和 reject 方法。

Promise.reject(reason)

粟子：

图片描述

Promise.resolve(value)

粟子：

图片描述

在旁注上，promise 可以有多个处理程序。因此，你可以将上述代码更新为：

图片描述

输出：

图片描述

下面两个方法帮助你处理一组 promise 。当你处理多个promise 时，最好先创建一个promise 数组，然后对这些promise 集执行必要的操作。

为了理解这些方法，我们不能使用上例中的 promiseTRRARNOSG，因为它太随机了，最好有一些确定性的 promise ，这样我们才能更好理解 promise 行为。

让我们创建两个函数。一个会在n秒后执行resolve，另一个会在n秒后执行 reject。

图片描述

现在让我们使用这些帮助函数来理解 Promise.All

Promise.All

根据 MDN 文档：

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise
都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise
有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。

例一：当所有的 promise 都执行完成了，这是最常用的场景。

图片描述

我们需要从输出中得出两个重要的结论：

第三个 promise 需要2秒完成，第二个 promise 需要4秒。但是正如你在输出中看到的，promise
的顺序在值中保持不变。
我添加了一个计时器来确定 promise 执行所需要时间。如果 promise 是按顺序执行的，那么总共需要 1+4+2=7 秒，但是从计时器中我们看到它只需要4秒。这证明了所有的 promise 都是并行执行的。

例二：当数组不是 promise 的时候呢？(我认为这是最不常用的)

图片描述