Promise对象：解决异步操作的方案 (ES6+)

欢迎来到今天的讲座

大家好，欢迎来到今天的讲座！今天我们要聊一聊 JavaScript 中的一个非常重要的概念——Promise。如果你还在为回调地狱（Callback Hell）烦恼，或者想让自己的代码更加优雅和可读，那么你来对地方了！

什么是异步操作？

在我们深入 Promise 之前，先简单回顾一下什么是异步操作。在 JavaScript 中，异步操作是指那些不会立即返回结果的操作。比如：

网络请求：发送一个 HTTP 请求去获取数据。
文件读取：从磁盘读取文件内容。
定时器：设置一个延迟执行的任务。

这些操作通常需要一段时间才能完成，而我们不希望它们阻塞主线程的执行。因此，JavaScript 提供了多种方式来处理异步操作，其中最常见的是回调函数。

回调地狱的痛苦

想象一下，你需要依次执行多个异步操作，并且每个操作都依赖于前一个操作的结果。你会怎么做？最简单的方式是使用回调函数嵌套：

function doSomethingAsync(callback) {
  setTimeout(() => {
    console.log('第一步完成了');
    callback();
  }, 1000);
}

function doAnotherThingAsync(callback) {
  setTimeout(() => {
    console.log('第二步完成了');
    callback();
  }, 1000);
}

function finalStep() {
  console.log('所有步骤都完成了！');
}

doSomethingAsync(() => {
  doAnotherThingAsync(() => {
    finalStep();
  });
});

看起来还可以，但当你的异步操作越来越多时，代码会变得非常难以维护。这就是所谓的“回调地狱”：

doSomethingAsync(() => {
  doAnotherThingAsync(() => {
    doYetAnotherThingAsync(() => {
      andAnotherOneAsync(() => {
        finalStep();
      });
    });
  });
});

是不是已经让你感到头晕目眩了？别担心，Promise 来救场了！

Promise 的基本概念

Promise 是 ES6 引入的一种用于处理异步操作的对象。它代表了一个异步操作的最终完成（或失败），并且可以让我们以更清晰、更简洁的方式编写异步代码。

Promise 的三种状态

一个 Promise 对象有三种状态：

状态	描述
pending	初始状态，表示异步操作尚未完成。
fulfilled	表示异步操作成功完成，此时可以获取操作的结果。
rejected	表示异步操作失败，通常会有一个错误信息说明失败的原因。

创建一个 Promise

我们可以使用 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个执行器函数（executor function），该函数有两个参数：resolve 和 reject。当异步操作成功时，调用 resolve；当异步操作失败时，调用 reject。

const myPromise = new Promise((resolve, reject) => {
  // 模拟一个异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('操作成功！');
    } else {
      reject('操作失败了...');
    }
  }, 1000);
});

// 使用 then 方法处理 fulfilled 或 rejected 状态
myPromise.then(
  (result) => console.log(result),  // 处理成功的情况
  (error) => console.error(error)   // 处理失败的情况
);

Promise 链式调用

Promise 的一大优势是可以进行链式调用，避免了回调地狱的问题。每个 .then() 方法都会返回一个新的 Promise，因此我们可以将多个异步操作串联起来。

const step1 = () => new Promise((resolve) => {
  setTimeout(() => {
    console.log('第一步完成了');
    resolve('step1 result');
  }, 1000);
});

const step2 = (data) => new Promise((resolve) => {
  setTimeout(() => {
    console.log(`第二步完成了，接收到的数据是: ${data}`);
    resolve('step2 result');
  }, 1000);
});

const step3 = (data) => new Promise((resolve) => {
  setTimeout(() => {
    console.log(`第三步完成了，接收到的数据是: ${data}`);
    resolve('step3 result');
  }, 1000);
});

// 链式调用
step1()
  .then(step2)
  .then(step3)
  .then(() => console.log('所有步骤都完成了！'))
  .catch((error) => console.error('某个步骤出错了:', error));

Promise.all() 和 Promise.race()

除了链式调用，Promise 还提供了两个非常有用的方法：Promise.all() 和 Promise.race()。

Promise.all()

Promise.all() 用于并行执行多个 Promise，并且只有当所有的 Promise 都成功完成时，才会返回一个包含所有结果的数组。如果任何一个 Promise 被拒绝，Promise.all() 会立即返回被拒绝的 Promise。

const promise1 = Promise.resolve('第一个 Promise');
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, '第二个 Promise'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, '第三个 Promise'));

Promise.all([promise1, promise2, promise3])
  .then((results) => console.log(results))  // 输出: ['第一个 Promise', '第二个 Promise', '第三个 Promise']
  .catch((error) => console.error(error));

Promise.race()

Promise.race() 用于并行执行多个 Promise，但它会在第一个 Promise 完成时立即返回，无论是成功还是失败。

const promise1 = new Promise((resolve) => setTimeout(resolve, 100, '第一个 Promise'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 500, '第二个 Promise'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 300, '第三个 Promise'));

Promise.race([promise1, promise2, promise3])
  .then((result) => console.log(result))  // 输出: '第一个 Promise'
  .catch((error) => console.error(error));

async/await：Promise 的语法糖

虽然 Promise 已经大大简化了异步代码的编写，但 ES2017 又引入了 async/await 语法糖，进一步提升了代码的可读性。async/await 实际上是基于 Promise 的，但它让我们可以像写同步代码一样编写异步代码。

async 函数

async 关键字用于定义一个异步函数。异步函数总是返回一个 Promise，并且可以在函数体内使用 await 关键字来等待 Promise 的完成。

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

fetchData();

await 关键字

await 关键字只能在 async 函数中使用，它会让代码暂停执行，直到 Promise 被解决（无论是成功还是失败）。一旦 Promise 完成，await 会返回 Promise 的结果。

async function example() {
  const promise1 = Promise.resolve('Hello');
  const promise2 = new Promise((resolve) => setTimeout(resolve, 1000, 'World'));

  const result1 = await promise1;  // 等待 promise1 完成
  console.log(result1);  // 输出: Hello

  const result2 = await promise2;  // 等待 promise2 完成
  console.log(result2);  // 输出: World
}

example();

async/await 的优势

代码更易读：async/await 让异步代码看起来像同步代码，减少了嵌套的复杂性。
错误处理更简单：可以通过 try...catch 块来捕获 Promise 的拒绝，而不需要传递多个回调函数。

总结

今天我们学习了 Promise，它是 ES6 引入的一种强大的异步编程工具。通过 Promise，我们可以避免回调地狱，编写更加清晰和可维护的异步代码。此外，Promise.all() 和 Promise.race() 为我们提供了处理多个异步操作的便捷方法。最后，async/await 语法糖让异步代码的编写变得更加简单和直观。

希望今天的讲座对你有所帮助！如果你有任何问题，欢迎随时提问。谢谢大家！