Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数

  1. (new Promise(step1))
  2.   .then(step2)
  3.   .then(step3)
  4.   .then(step4);

Promise 对象的状态

Promise 对象通过自身的状态，来控制异步操作。Promise 实例具有三种状态。

  • 异步操作未完成（pending）
  • 异步操作成功（fulfilled）
  • 异步操作失败（rejected）
    上面三种状态里面，fulfilled和rejected合在一起称为resolved（已定型）。

这三种的状态的变化途径只有两种。

  • 从“未完成”到“成功”
  • 从“未完成”到“失败”
    一旦状态发生变化，就凝固了，不会再有新的状态变化。这也是 Promise 这个名字的由来，它的英语意思是“承诺”，一旦承诺成效，就不得再改变了。这也意味着，Promise 实例的状态变化只可能发生一次。

因此，Promise 的最终结果只有两种。

  • 异步操作成功，Promise 实例传回一个值（value），状态变为fulfilled。
  • 异步操作失败，Promise 实例抛出一个错误（error），状态变为rejected。

Promise 构造函数

JavaScript 提供原生的Promise构造函数，用来生成 Promise 实例

  1. var promise = new Promise(function (resolve, reject) {
  2.   // ...
  4.   if (/* 异步操作成功 */){
  5.     resolve(value);
  6.   } else { /* 异步操作失败 */
  7.     reject(new Error());
  8.   }
  9. });

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己实现。

resolve函数的作用是，将Promise实例的状态从“未完成”变为“成功”（即从pending变为fulfilled），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。reject函数的作用是，将Promise实例的状态从“未完成”变为“失败”（即从pending变为rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去

Promise.prototype.then()

Promise 实例的then方法，用来添加回调函数
then方法可以接受两个回调函数，第一个是异步操作成功时（变为fulfilled状态）的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（该参数可以省略）。一旦状态改变，就调用相应的回调函数

  1. p1
  2.   .then(step1)
  3.   .then(step2)
  4.   .then(step3)
  5.   .then(
  6.     console.log,
  7.     console.error
  8.   );

p1后面有四个then，意味依次有四个回调函数。只要前一步的状态变为fulfilled，就会依次执行紧跟在后面的回调函数
最后一个then方法，回调函数是console.log和console.error，用法上有一点重要的区别。console.log只显示step3的返回值，而console.error可以显示p1、step1、step2、step3之中任意一个发生的错误。举例来说，如果step1的状态变为rejected，那么step2和step3都不会执行了（因为它们是resolved的回调函数）。Promise 开始寻找，接下来第一个为rejected的回调函数，在上面代码中是console.error。这就是说，Promise 对象的报错具有传递性。

图片加载

  1. var preloadImage = function (path) {
  2.   return new Promise(function (resolve, reject) {
  3.     var image = new Image();
  4.     image.onload  = resolve;
  5.     image.onerror = reject;
  6.     image.src = path;
  7.   });
  8. };
  10. preloadImage('https://example.com/my.jpg')
  11.   .then(function (e) { document.body.append(e.target) })
  12.   .then(function () { console.log('加载成功') })

Promise 的优点在于，让回调函数变成了规范的链式写法，程序流程可以看得很清楚。它有一整套接口，可以实现许多强大的功能，比如同时执行多个异步操作，等到它们的状态都改变以后，再执行一个回调函数；再比如，为多个回调函数中抛出的错误，统一指定处理方法等等。

而且，Promise 还有一个传统写法没有的好处：它的状态一旦改变，无论何时查询，都能得到这个状态。这意味着，无论何时为 Promise 实例添加回调函数，该函数都能正确执行。所以，你不用担心是否错过了某个事件或信号。如果是传统写法，通过监听事件来执行回调函数，一旦错过了事件，再添加回调函数是不会执行的。

Promise 的缺点是，编写的难度比传统写法高，而且阅读代码也不是一眼可以看懂。你只会看到一堆then，必须自己在then的回调函数里面理清逻辑

Promise 的回调函数不是正常的异步任务，而是微任务（microtask）。它们的区别在于，正常任务追加到下一轮事件循环，微任务追加到本轮事件循环。这意味着，微任务的执行时间一定早于正常任务

  1. setTimeout(function() {
  2.   console.log(1);
  3. }, 0);
  5. new Promise(function (resolve, reject) {
  6.   resolve(2);
  7. }).then(console.log);
  9. console.log(3);
  10. // 3
  11. // 2
  12. // 1

说明then的回调函数的执行时间，早于setTimeout(fn, 0)。因为then是本轮事件循环执行，setTimeout(fn, 0)在下一轮事件循环开始时执行