让异步编程更轻松——Promise

2023-11-02 21:26:02

什么是 Promise？

Promise 是一种表示异步操作的返回值的对象。它代表着这个异步操作最终的结果，无论是成功还是失败。Promise 对象有三个状态：

pending：表示异步操作正在进行中。
fulfilled：表示异步操作已成功完成。
rejected：表示异步操作已失败。

Promise 的用法

要使用 Promise，我们需要先创建一个 Promise 对象。可以使用 Promise 构造函数来创建一个 Promise 对象，如下所示：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    // 如果异步操作成功，调用 resolve()
    resolve('异步操作成功');
  }, 1000);
});

在 Promise 构造函数中，我们传入了一个函数作为参数，这个函数称为 Promise 的执行器函数。执行器函数有两个参数，分别是 resolve 和 reject。

resolve：当异步操作成功时，调用 resolve() 来将 Promise 的状态从 pending 改变为 fulfilled。
reject：当异步操作失败时，调用 reject() 来将 Promise 的状态从 pending 改变为 rejected。

Promise 的 then() 方法

then() 方法是 Promise 对象的一个方法，它允许我们在 Promise 状态改变后执行一些操作。then() 方法接受两个参数，分别是成功回调函数和失败回调函数。

promise.then((data) => {
  // 异步操作成功后的处理逻辑
}, (error) => {
  // 异步操作失败后的处理逻辑
});

Promise 的 catch() 方法

catch() 方法也是 Promise 对象的一个方法，它允许我们在 Promise 失败后执行一些操作。catch() 方法只接受一个参数，即失败回调函数。

promise.catch((error) => {
  // 异步操作失败后的处理逻辑
});

Promise 的 all() 方法

all() 方法是 Promise 的一个静态方法，它允许我们等待多个 Promise 对象都成功后才执行一些操作。all() 方法接受一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。

const promises = [
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步操作 1 成功');
    }, 1000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步操作 2 成功');
    }, 2000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步操作 3 成功');
    }, 3000);
  }),
];

Promise.all(promises).then((data) => {
  // 所有异步操作都成功后的处理逻辑
});

Promise 的 race() 方法

race() 方法是 Promise 的一个静态方法，它允许我们等待第一个成功或失败的 Promise 对象执行后才执行一些操作。race() 方法接受一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。

const promises = [
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步操作 1 成功');
    }, 1000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('异步操作 2 失败');
    }, 2000);
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步操作 3 成功');
    }, 3000);
  }),
];

Promise.race(promises).then((data) => {
  // 第一个异步操作成功或失败后的处理逻辑
}, (error) => {
  // 第一个异步操作失败后的处理逻辑
});