【异步通关：Promise 在 Web 编程中的攻防】

2023-01-05 01:02:08

征服异步编程江湖：掌控 Promise，挥洒自如

在 Web 编程的江湖中，异步编程就好似一门绝世武功，让你在处理各种异步任务时游刃有余，实现高并发、高性能的代码。而 Promise，则是异步编程界的翘楚，凭借其优雅的语法和强大的功能，让异步编程变得如此简单而富有魅力。

Promise 的登场：异步编程的救星

在异步编程中，回调函数是处理异步操作的常用手段。然而，回调函数容易导致嵌套回调，代码结构变得难以理解和维护。Promise 的出现，就是为了解决这一痛点。它通过提供一种更简洁、更易读的语法，让异步编程变得更加轻松愉快。

Promise 的三板斧：状态、值和回调

Promise 有三种重要的状态：Pending、Fulfilled 和 Rejected。Pending 表示 Promise 处于等待状态，还没有执行完成；Fulfilled 表示 Promise 执行成功，并带有结果值；Rejected 表示 Promise 执行失败，并带有错误值。

Promise 还提供 then() 方法，用于处理 Promise 的状态变化。then() 方法接受两个回调函数作为参数，第一个回调函数用于处理 Promise 的 Fulfilled 状态，第二个回调函数用于处理 Promise 的 Rejected 状态。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("异步任务执行成功");
  }, 2000);
});

promise.then(result => {
  console.log(result); // 输出："异步任务执行成功"
}).catch(error => {
  console.error(error);
});

Promise 的四两拨千斤：应用场景

Promise 的应用场景非常广泛，在 Web 编程中随处可见它的身影。

异步任务并发处理： Promise 可以同时发起多个异步任务，并等待所有任务执行完毕后再进行后续操作。这对于提高程序的并发度非常有用。
状态管理： Promise 可以对异步操作的状态进行管理，以便我们能够根据不同的状态做出相应的处理。
错误处理： Promise 可以捕获异步操作中发生的错误，并将其传递给 then() 方法的第二个回调函数，从而方便我们对错误进行处理。

Promise 的进阶招式：Promise.all 和 Promise.race

Promise.all() 方法可以并行执行多个 Promise，并等待所有 Promise 执行完毕后，将所有 Promise 的结果值收集到一个数组中返回。这对于需要同时处理多个异步任务的情况非常有用。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务 1 完成");
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务 2 完成");
  }, 3000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务 3 完成");
  }, 1000);
});

Promise.all([promise1, promise2, promise3]).then(results => {
  console.log(results); // 输出：["任务 1 完成", "任务 2 完成", "任务 3 完成"]
});

Promise.race() 方法可以并行执行多个 Promise，并返回第一个执行完毕的 Promise 的结果值。这对于需要快速响应的情况非常有用。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务 1 完成");
  }, 2000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务 2 完成");
  }, 3000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("任务 3 完成");
  }, 1000);
});

Promise.race([promise1, promise2, promise3]).then(result => {
  console.log(result); // 输出：任务 3 完成
});