JavaScript 中的 Promise 链式调用

Question

Promise 链使 Promise 比 回调 。
关键思想是 Promise 的 then()函数 返回另一个承诺，所以你可以链接 .then() 一起调用来告诉 JavaScript 按顺序执行异步调用。

const start = Date.now();
return Promise.resolve().
  then(() => new Promise(resolve => setTimeout(resolve, 50))).
  then(() => new Promise(resolve => setTimeout(resolve, 50))).
  then(v => {
    console.log(Date.now() - start); // About 100ms passed
  });

返回值

的第一个参数 then() 函数被调用 onFulfilled()。
这是因为 JavaScript 会在 promise 完成时调用该函数。
JavaScript 调用 onFulfilled() 函数的第一个参数是 promise 的值。

承诺链有效，因为如果你 onFulfilled() 函数返回一个承诺 q， 承诺 then() 返回将 采用 的状态 q。所以承诺 then() 退货将具有与 q。

return Promise.resolve(1).
  // If `onFulfilled()` returns a promise, JavaScript calls the
  // next `onFulfilled()` with the fulfilled value of the promise
  // your `onFulfilled()` returned.
  then(v => new Promise(resolve => setTimeout(() => resolve(v + 1), 10))).
  then(v => new Promise(resolve => setTimeout(() => resolve(v + 1), 10))).
  then(v => new Promise(resolve => setTimeout(() => resolve(v + 1), 10))).
  // If `onFulfilled()` returns a value that isn't a promise,
  // JavaScript calls the next `onFulfilled()` with that value.
  then(v => v + 1).
  then(v => {
    console.log(v); // 5
  });

错误处理

Promise 链也巩固了错误处理。 你只需要一个 .catch() 函数 最后调用你的承诺链来处理你的承诺链中发生的任何错误。

Promise.resolve(1).
  then(v => v + 1).
  // Async error in the middle of the chain goes straight
  // to `catch()`.
  then(() => Promise.reject(new Error('Oops'))).
  then(v => v + 1).
  catch(err => {
    err.message; // 'Oops'
  });

Promise.resolve(1).
  then(v => v + 1).
  // Sync error in the middle of the chain goes straight
  // to `catch()` too.
  then(() => { throw new Error('Oops'); }).
  then(v => v + 1).
  catch(err => {
    err.message; // 'Oops'
  });

概括

Promise 链的高级结构是一系列 .then() 电话，每个电话都有一个 onFulfilled() 参数和单个 .catch() 在最后。 JavaScript 执行 .then() 按顺序回调，或直接到 .catch() 如果其中之一 onFulfilled() 功能错误了。