用 ES6 实现灵活的 Promise 链式调用

前端

2024-01-30 22:16:11

引言

JavaScript 作为一种单线程语言，其异步编程一直是开发者们面临的挑战。在 ES6 之前，为了处理异步操作，开发者们不得不使用回调函数，这导致了 печальный код (俄语意为“悲伤的代码”) 的出现。

Promise 的诞生

为了解决回调地狱的问题，ES6 引入了 Promise 特性。Promise 是一个对象容器，将异步操作保存在内部。当异步操作完成时，Promise 会改变其状态并执行相应的回调函数。

Promise 的基本用法

一个 Promise 对象有三种状态：

等待状态（pending）：异步操作尚未完成。
已完成状态（fulfilled）：异步操作已完成，并且结果是成功的。
已拒绝状态（rejected）：异步操作已完成，并且结果是失败的。

使用 Promise 时，可以使用 then() 方法来处理异步操作的结果。then() 方法有两个参数：

成功回调函数：当异步操作成功完成时执行的函数。
失败回调函数：当异步操作失败时执行的函数。

例如，下面的代码演示了如何使用 Promise 处理一个异步操作：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步操作已完成');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：异步操作已完成
}).catch((error) => {
  console.log(error);
});

Promise 的链式调用

Promise 的一个重要特性是链式调用。链式调用是指将多个 Promise 对象连接起来，形成一个执行顺序确定的异步操作序列。

链式调用的实现非常简单，只需要在 then() 方法中返回一个新的 Promise 对象即可。例如，下面的代码演示了如何使用链式调用来处理两个异步操作：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步操作1已完成');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步操作2已完成');
  }, 2000);
});

promise1.then((result) => {
  console.log(result); // 输出：异步操作1已完成
  return promise2;
}).then((result) => {
  console.log(result); // 输出：异步操作2已完成
}).catch((error) => {
  console.log(error);
});