Promise的链式调用、异常穿透、中断promise链剖析

2023-10-26 06:02:38

前言

Promise是JavaScript中非常重要的一个异步编程工具，它为处理异步操作提供了简洁而强大的方式。理解Promise的特性对于编写可靠、可维护的异步代码至关重要。

Promise的链式调用

Promise的链式调用是指将多个Promise对象串联起来，形成一个序列化的执行过程。每个Promise对象代表一个异步操作，当一个Promise对象执行完毕后，它的结果就会传递给下一个Promise对象作为输入。这种方式可以让异步操作看起来像同步操作一样，大大简化了异步代码的编写和阅读。

链式调用是通过.then()方法实现的。.then()方法接收两个参数，第一个参数是一个回调函数，当Promise对象执行成功时，这个回调函数就会被调用，并传入Promise对象的执行结果作为参数。第二个参数也是一个回调函数，当Promise对象执行失败时，这个回调函数就会被调用，并传入Promise对象的错误信息作为参数。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

promise1
  .then((result) => {
    console.log(result); // Promise 1 resolved
    return 'Promise 2 resolved';
  })
  .then((result) => {
    console.log(result); // Promise 2 resolved
  })
  .catch((error) => {
    console.error(error);
  });

在上面的代码中，promise1是一个Promise对象，它代表一个异步操作，这个异步操作将在1秒后执行完毕，并返回结果"Promise 1 resolved"。.then()方法被用来将promise1和后面的Promise对象串联起来，形成一个链式调用。当promise1执行完毕后，.then()方法中的第一个回调函数就会被调用，并将"Promise 1 resolved"作为参数传入。在这个回调函数中，我们又返回了一个新的Promise对象promise2，这个Promise对象将在.then()方法中的第二个回调函数中被调用。

异常穿透

异常穿透是指在Promise链中，如果一个Promise对象执行失败，后面的Promise对象仍然会继续执行，而不会被这个错误影响。这种现象被称为异常穿透。

异常穿透可以通过使用.catch()方法来避免。.catch()方法接收一个回调函数，当Promise链中的任何一个Promise对象执行失败时，这个回调函数就会被调用，并传入Promise对象的错误信息作为参数。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise 1 rejected');
  }, 1000);
});

promise1
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error); // Promise 1 rejected
  })
  .then((result) => {
    console.log(result); // 不会被执行
  });

在上面的代码中，promise1是一个Promise对象，它代表一个异步操作，这个异步操作将在1秒后执行完毕，并返回错误信息"Promise 1 rejected"。.catch()方法被用来捕获这个错误，并将其输出到控制台。后面的.then()方法不会被执行，因为在.catch()方法中已经处理了这个错误。

中断Promise链

在某些情况下，我们需要中断Promise链，防止后续的Promise对象执行。我们可以通过使用.break()方法来实现这个目的。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

promise1
  .then((result) => {
    console.log(result); // Promise 1 resolved
    throw new Error('中断Promise链');
  })
  .catch((error) => {
    console.error(error); // 中断Promise链
  })
  .then((result) => {
    console.log(result); // 不会被执行
  });

在上面的代码中，promise1是一个Promise对象，它代表一个异步操作，这个异步操作将在1秒后执行完毕，并返回结果"Promise 1 resolved"。.then()方法被用来将promise1和后面的Promise对象串联起来，形成一个链式调用。当promise1执行完毕后，.then()方法中的第一个回调函数就会被调用，并将"Promise 1 resolved"作为参数传入。在这个回调函数中，我们使用throw抛出一个错误"中断Promise链"。这个错误会被.catch()方法捕获，并输出到控制台。后面的.then()方法不会被执行，因为Promise链已经被中断了。