你可能不知道的 Promise

本文首发于个人博客，转载请注明出处：http://kohpoll.github.io/blog/2016/05/02/the-promise-you-may-not-know/

开始以前，咱们先来一个“脑筋急转弯”。假设 later 函数调用后返回一个 promise 对象，下面这 4 种写法有什么区别？

// #1
later(1000)
  .then(function() {
    return later(2000);
  });

// #2
later(1000)
  .then(function() {
    later(2000);
  });

// #3
later(1000)
  .then(later(2000));

// #4
later(1000)
  .then(later);

你们能够先实际去运行代码看看输出结果：#1、#2、#3、#4，想一想为何是这样的输出，而后回来继续阅读。

Promise 是什么

Promise 是对异步处理的一种抽象。在 JavaScript 中，咱们一般使用回调函数来进行异步处理：

later(1000, function(err) {
  if (err) {
    // 失败时的处理
  } else {
    // 成功时的处理
  }
});

Promise 将异步处理进行抽象，并造成规范化的接口：

later(1000)
  .then(function() {
    // 成功时的处理
  })
  .catch(function(err) {
    // 失败时的处理
  });

基于固定、统一的接口编程，咱们能够将复杂的异步处理模式化。

建立 Promise 对象

• new Promise(function fn(resolve, reject) {}) 会返回一个状态为 pending 的 promise 对象

• 在 fn 中指定处理逻辑

  • 处理成功时，调用 resolve(结果)，promise 对象状态变动为 fulfilled

  • 处理失败时，调用 reject(Error 对象)，promise 对象状态变动为 rejected

const later = function(timeout) {
  return new Promise(function fn(resolve, reject) {
    timeout = parseInt(timeout, 10);
    if (!timeout) {
      return reject(new Error('Invalid Timeout'));
    }
    return setTimeout(function() {
      resolve('later_' + timeout);
    }, timeout);
  });
};

获取到 promise 对象后，咱们能够为其添加处理方法：

• 当对象被 resolve 时的处理方法（onFulfilled）

• 当对象被 reject 时的处理方法（onRejected）

later(1000)
  .then(function onFulfilled(data) {})
  .catch(function onRejected(err) {});

later(1000)
  .then(
    function onFulfilled(data) {},
    function onRejected(err) {}
  );

在 onFulfilled 函数内能够作什么

later(1000).then(function() {
  // 在这里能作些什么特别的？
});

• 返回一个 promise 对象

• 返回一个同步值（什么也不返回，那就是返回 undefined）

• throw 一个 Error 对象

返回一个 promise 对象

返回一个 promise 对象就是在作异步操做的串行化。

later(1000)
  .then(function(data) {
    // data = later_1000
    return later(2000);
  })
  .then(function(data) {
    // data = later_2000
  });

上面的代码会在 1 秒后得到第一个 promise 对象的结果，而后再过 2 秒后得到第二个 promise 对象的结果。

返回一个同步值

返回一个同步值能够将同步代码 “promise 化”。

later(1000)
  .then(function(data) {
    // data = later_1000
    if (data != 'later_1000') {
      return later(1000);
    }
    return data;
  })
  .then(function(data) {
    // data = later_1000
  });

上面的代码保证最后得到的结果老是 later_1000（只是等 1 秒仍是 2 秒的区别）。更实用的例子是异步获取某个数据（查询 db），咱们能够先从本地 cache 查询，查到直接返回同步值，不然返回一个查询 db 的 promise 对象，最终都会得到正确的数据。

函数什么都不返回等于返回了 undefined，因此当心下面的写法：

later(1000)
  .then(function(data) {
    // data = later_1000
    later(2000);
  })
  .then(function(data) {
    // data = undefined
  });

上面的代码在 1 秒后取到第一个 promise 对象的结果，而后不会等待第二个 promise 对象的结果，立刻就执行到了第二个 .then()。

（同步）抛出一个 Error 对象

在 .then() 里面抛出一个 Error 对象可让错误处理更加方便。

later(1000)
  .then(function(data) {
    if (data == 'later_1000') {
      throw new Error('later_1000 invalid');
    }
    if (data == 'later_2000') {
      return data;
    }
    return later(3000);
  })
  .then(function(data) {
  })
  .catch(function(err) {
    // 捕获到错误 Error('later_1000 invalid');
  });

只要咱们调用 catch 添加了 onRejected 回调处理，在 then() 里面 throw 出的任何同步错误都会在 catch() 里面被捕捉到（好比：不当心访问了未定义值啊、JSON.parse 错误啊等等），这让问题定位很是方便。

能捕获到的是“同步”错误，请当心下面的代码：

later(1000)
  .then(function(data) {
    setTimeout(function() {
      throw new Error('the err can not catch');
    }, 1000);
  })
  .then(function(data) {
    // data = undefined
  })
  .catch(function(err) {
    // 捕获不到错误
  });

另外须要注意 .then(null, onRejected) 并不彻底等价于 .catch(onRejected)：

later(1000)
  .then(function(data) {
    throw new Error('this is err');
  })
  .catch(function(err) {
    // 捕获到错误 Error('this is err');
  });

later(1000)
  .then(
    function(data) {
      throw new Error('this is err');
    },
    function(err) {
      // 捕获不到错误 Error('this is err');
    }
  );

最佳实践

咱们总结下这一部分的最佳实践：

• 老是在 .then() 里面使用 return 来返回 promise 对象或者同步值

• 老是在 .then() 里面 throw 同步的 Error 对象

• 老是使用 .catch() 来捕获错误

能够给 .then() 函数传递什么

目前为止，咱们看到给 .then() 传递的都是函数，可是其实它能够接受非函数值：

later(1000)
  .then(later(2000))
  .then(function(data) {
    // data = later_1000
  });

给 .then() 传递非函数值时，实际上会被解析成 .then(null)，从而致使上一个 promise 对象的结果被“穿透”。因而，上面的代码等价于：

later(1000)
  .then(null)
  .then(function(data) {
    // data = later_1000
  });

为了不没必要要的麻烦，建议老是给 .then() 传递函数。

一些编码技巧

快速建立 promise 对象

上面咱们主要经过 new Promise(fn) 的方式来建立 promise 对象，实际上有一个快捷方法 Promise.resolve(value) 能够方便的建立 promise 对象。

Promise.resolve 的使用场景主要包括：

• 用最少的代码快速建立一个 promise 对象

• 在 promise 化的 API 接口中将同步代码 promise 化，更好的捕捉同步代码产出的错误

下面两种写法是等价的，显然使用 Promise.resolve 更加简练：

new Promise(function(resolve, reject) {
  resolve('value');
}).then(function(data) {});

Promise.resolve('value').then(function(data) {});

在 promise 化的 API 中，将同步代码 promise 化能够统一的在 .catch() 中捕获异常：

function apiReturnPromise() {
  return Promise.resolve().then(function() {
    someFuncMayThrowError();
    return 'xyz';
  }).then(function(data) {
    return doAsync(data);
  });
}
apiReturnPromise()
  .then(function(data) {})
  .catch(function(err) {
    // 能够一致的捕捉到错误
  });

如何解决 promise 对象间的依赖

实际编码中咱们可能常常遇到一个 promise 对象依赖另外一个 promise 对象的执行，而且咱们两个 promise 对象的结果都须要的状况：

later(1000)
  .then(function(dataA) {
    return later(2000);
  })
  .then(function(dataB) {
    // 咱们同时须要 dataA 和 dataB
  });

前面咱们说到在 .then() 里能够返回 promise 对象，这个 promise 对象其实是能够调用本身的 .then() 的。下面的代码能够知足需求：

later(1000)
  .then(function(dataA) {
    return later(2000).then(function(dataB) {
      return dataA + ':' + dataB;
    });
  })
  .then(function(data) {
    // data = later_1000:later_2000
  });

异步处理中的并行和串行

在异步处理中，常常须要结合 for 循环来进行批量处理。由于处理都是异步的，这个过程就相应的被分为了两类：

• 并行：一批异步操做同时执行

• 串行：一批异步操做挨个执行（一个操做完成后下一个操做才继续）

promise 对象是对异步操做的一个抽象表示，对 promise 对象进行不一样的操做能够达到异步处理的并行和串行。

并行

Promise.all 方法能够接受一个数组（数组里面的元素是 promise 对象）。当数组内全部 promise 对象变为 fulfilled 状态时，才调用 .then()；数组内有任一个 promise 对象变为 rejectec 状态时，调用 .catch()。

const promises = [1000, 2000, 3000].map(function(timeout) {
  return later(timeout);
});
Promise.all(promises)
  .then(function(data) {
    // data = ['later_1000', 'later_2000', 'later_3000']
  })
  .catch(function(err) {
  });

数组内 promise 对象所表示的异步操做是同时执行的，而且最后的结果和传递给 Promise.all 的数组的顺序是一致的。因此，3 秒钟后咱们取得的结果是一个值为 ['later_1000', 'later_2000', 'later_3000'] 的数组。

串行

在 .then() 里面返回一个 promise 对象就是一种串行。咱们须要构造一个相似下面这样的 promise 对象：

promise1
  .then(function() { return promise2; })
  .then(function() { return promise3; })
  .then(...);

将一个数组转换为一个值，使用 reduce 能够实现：

[1000, 2000, 3000]
  .reduce(function(promise, timeout) {
    return promise.then(function() {
      return later(timeout);
    });
  }, Promise.resolve())
  .then(function(data) {
    // data = later_3000
  })
  .catch(function(err) {
  });

上面代码将如下面的方式来执行：

Promise.resolve()
  .then(function() { return later(1000); })
  .then(function() { return later(2000); })
  .then(function() { return later(3000) })
  .then(function(data) {
    // data = later_3000
  })
  .catch(function(err) {
  });

每一个 promise 对象表示的异步操做依次执行，最终结果将会在 6 秒后取得（只能取到最后一个 promise 对象的结果，若是都须要的话，须要单独进行处理存储）。

参考答案

问题 1

later(1000)
  .then(function() {
    return later(2000);
  })
  .then(done);

执行结果：

later(1000)  later(2000)            done(later_2000)
|-----1s-----|----------2s----------|

问题 2

later(1000)
  .then(function() {
    later(2000);
  })
  .then(done);

执行结果：

later(1000)  done(undefined)           
|-----1s-----|
             later(2000)
             |----------2s----------|

问题 3

later(1000)
  .then(later(2000))
  .then(done);

执行结果：

later(1000)  done(later_1000)
|-----1s-----|
later(2000)
|----------2s----------|

问题 4

later(1000)
  .then(later)
  .then(done);

执行结果：

later(1000)  later(later_1000)
|-----1s-----|
             throw new Error('Invalid Timeout')

参考资料

• http://liubin.org/promises-book/

• https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html