理解 Promise 的链式调用和错误处理

Promise 是一种 JavaScript 异步编程的解决方案，它可以让我们更优雅地处理异步操作。在实际开发中，我们经常需要对多个异步操作进行串联，这时候就需要使用 Promise 的链式调用。

Promise 链式调用

Promise 的链式调用可以让我们更方便地将多个异步操作串联起来执行。在 Promise 中，每个 then 方法返回的都是一个新的 Promise 对象，这个对象可以继续调用 then 方法，从而形成链式调用。

下面是一个简单的例子，我们使用 Promise 来实现一个异步的加法操作：

// www.javascriptcn.com code example
function add(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (typeof a === 'number' && typeof b === 'number') {
        resolve(a + b);
      } else {
        reject(new Error('参数必须是数字'));
      }
    }, 1000);
  });
}

add(1, 2)
  .then(result => {
    console.log(result); // 输出 3
    return add(result, 3);
  })
  .then(result => {
    console.log(result); // 输出 6
    return add(result, 'a');
  })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error.message);
  });

在上面的例子中，我们首先调用 add 方法，它返回一个 Promise 对象。我们在第一个 then 方法中处理这个 Promise 对象的结果，如果结果正确，则继续调用 add 方法，如果结果错误，则直接跳到 catch 方法。

在第二个 then 方法中，我们处理第二个异步操作的结果。在第三个 then 方法中，我们故意传入一个非数字的参数，这时候 add 方法会返回一个错误的 Promise 对象，这时候就会跳到 catch 方法中处理错误。

Promise 错误处理

在 Promise 链式调用中，如果某个 Promise 对象出现了错误，就会跳到链式调用的最后一个 catch 方法中进行处理。在 catch 方法中，我们可以对错误进行统一的处理，比如输出错误信息、记录日志等。

在上面的例子中，我们使用了 catch 方法来处理错误。如果任何一个 Promise 对象返回了错误，就会跳到 catch 方法中，输出错误信息。

除了使用 catch 方法，我们还可以在 Promise 中使用 try-catch 语句来捕获错误。例如：

// www.javascriptcn.com code example
function add(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      try {
        if (typeof a === 'number' && typeof b === 'number') {
          resolve(a + b);
        } else {
          throw new Error('参数必须是数字');
        }
      } catch (error) {
        reject(error);
      }
    }, 1000);
  });
}

add(1, 2)
  .then(result => {
    console.log(result); // 输出 3
    return add(result, 3);
  })
  .then(result => {
    console.log(result); // 输出 6
    return add(result, 'a');
  })
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error.message);
  });

在上面的例子中，我们在 add 方法中使用 try-catch 语句来捕获错误，并将错误信息传递给 reject 方法。这样就可以在链式调用的最后一个 catch 方法中处理错误了。

结语

Promise 的链式调用和错误处理是前端开发中非常重要的一部分。掌握了 Promise 的链式调用和错误处理，可以让我们更加优雅地处理异步操作，提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4a728a941bf71348c4b02