深入探索 Promise 的类方法：ES6 新特性解析

前端

2023-09-06 20:24:30

每天3分钟，重学ES6-ES12(十一)Promise的类方法

ES6 的引入为 JavaScript 带来了许多令人兴奋的新特性，其中之一便是 Promise 的类方法。这些方法使我们能够以更简洁、更具可读性的方式编写异步代码。

Promise 的类方法

Promise 的类方法主要包括以下几种：

then：用于处理 Promise 的结果。
catch：用于处理 Promise 中的错误。
finally：无论 Promise 是成功还是失败，都会执行的代码块。
all：用于等待多个 Promise 同时完成。
race：用于等待多个 Promise 中的第一个完成。
allSettled：用于等待多个 Promise 全部完成，无论它们是成功还是失败。

使用 Promise 的类方法

让我们通过一些示例来看一下如何使用 Promise 的类方法。

// then 方法
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：成功
});

// catch 方法
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('失败'));
  }, 1000);
});

promise.catch((error) => {
  console.log(error); // 输出：Error: 失败
});

// finally 方法
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

promise.finally(() => {
  console.log('无论成功还是失败，都会执行的代码');
});

// all 方法
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功2');
  }, 2000);
});

Promise.all([promise1, promise2]).then((result) => {
  console.log(result); // 输出：['成功1', '成功2']
});

// race 方法
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功2');
  }, 2000);
});

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 输出：成功1
});

// allSettled 方法
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('失败2'));
  }, 2000);
});

Promise.allSettled([promise1, promise2]).then((result) => {
  console.log(result); 
  // 输出：[
  //   { status: 'fulfilled', value: '成功1' },
  //   { status: 'rejected', reason: Error: 失败2 }
  // ]
});