Promise基础 | 青训营

30 阅读3分钟

平时开发中一直用各种框架封装好的数据和方法,面试的时候竟然连 Promise 这种基础知识都答不上来,遂整理 Promise 知识点

1. 介绍

Promise 是 JavaScript 中用于处理异步操作的对象。它可以将异步操作转化为一种更易于管理和处理的形式。Promise 有三种状态:pending(进行中)、fulfilled(已完成)和rejected(已拒绝)。一旦 Promise 进入了 fulfilled 或 rejected 状态,它就变为不可变的,无法再改变状态。

2. 创建 Promise

可以使用 new Promise() 构造函数来创建一个 Promise 对象。构造函数接受一个执行器函数作为参数,该函数包含两个参数:resolve 和 reject

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  // 如果操作成功,调用 resolve(value)
  // 如果操作失败,调用 reject(error)
});

3. 处理 Promise 结果

Promise 提供了一些方法来处理异步操作的结果。

3.1. 使用 then() 处理成功状态

可以使用 then() 方法来处理 Promise 成功状态。then() 接受一个回调函数作为参数,该函数在 Promise 进入 fulfilled 状态时被调用,可以获取到 Promise 的结果值。

myPromise.then((value) => {
  // 处理成功状态
  console.log('操作成功,结果为:', value);
});

3.2. 使用 catch() 处理失败状态

可以使用 catch() 方法来处理 Promise 失败状态。catch() 接受一个回调函数作为参数,该函数在 Promise 进入 rejected 状态时被调用,可以获取到 Promise 的错误信息。

myPromise.catch((error) => {
  // 处理失败状态
  console.log('操作失败,错误信息为:', error);
});

3.3. 使用 finally() 处理最终状态

可以使用 finally() 方法来处理 Promise 最终状态,无论 Promise 最终进入 fulfilled 还是 rejected 状态,finally() 方法都会被调用。

myPromise.finally(() => {
  // 处理最终状态
  console.log('无论成功还是失败,都会执行该代码块');
});

4. Promise 链式调用

Promise 具有链式调用的特性,可以通过 then() 方法的返回值再次调用其他方法。

myPromise
  .then((value) => {
    // 处理成功状态
    console.log('操作成功,结果为:', value);
    // 返回一个新的 Promise 对象
    return anotherPromise;
  })
  .then((value) => {
    // 处理新的 Promise 成功状态
    console.log('另一个操作成功,结果为:', value);
  })
  .catch((error) => {
    // 处理失败状态
    console.log('操作失败,错误信息为:', error);
  });

5. Promise.all() 方法

Promise 提供了 Promise.all() 方法,用于并行处理多个 Promise 对象。它接受一个 Promise 对象数组作为参数,并返回一个新的 Promise 对象,该对象在所有 Promise 对象都进入 fulfilled 状态时被解决。

const promises = [promise1, promise2, promise3];

Promise.all(promises)
  .then((results) => {
    // 处理所有 Promise 对象的结果
    console.log('所有操作均已完成,结果为:', results);
  })
  .catch((error) => {
    // 处理失败状态
    console.log('操作失败,错误信息为:', error);
  });

6. Promise.race() 方法

Promise 提供了 Promise.race() 方法,用于竞争处理多个 Promise 对象。它接受一个 Promise 对象数组作为参数,并返回一个新的 Promise 对象,该对象在第一个进入 fulfilled 或 rejected 状态的 Promise 对象被解决。

const promises = [promise1, promise2, promise3];

Promise.race(promises)
  .then((result) => {
    // 处理第一个完成的 Promise 对象的结果
    console.log('第一个操作已完成,结果为:', result);
  })
  .catch((error) => {
    // 处理失败状态
    console.log('操作失败,错误信息为:', error);
  });

7. 异步函数和 Promise

在异步函数中,可以使用 async 和 await 关键字来处理 Promise 对象。async 关键字用于定义异步函数,await 关键字用于等待 Promise 对象的解决。

async function myAsyncFunction() {
  try {
    const result = await myPromise;
    // 处理成功状态
    console.log('操作成功,结果为:', result);
  } catch (error) {
    // 处理失败状态
    console.log('操作失败,错误信息为:', error);
  }
}