全手写 Promise 的相关方法与功能深入浅出解析，助您轻松驾驭异步编程

前端

2024-02-19 01:57:38

Promise 简介

Promise 是 JavaScript 中用于处理异步操作的类。它允许您将异步操作的结果传递给后续的代码，从而使异步编程变得更加容易。

Promise 有三种状态：

未完成（pending）：Promise 刚被创建时处于未完成状态。
已完成（fulfilled）：Promise 成功执行后处于已完成状态。
已拒绝（rejected）：Promise 执行失败后处于已拒绝状态。

Promise 的基本方法

1. .then() 方法

.then() 方法是 Promise 中最基本的方法之一。它允许您将回调函数传递给 Promise，以便在 Promise 完成或拒绝时执行。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功'); // Promise 已完成
  }, 1000);
});

promise.then(result => {
  // Promise 已完成时的回调函数
  console.log(result); // 输出：成功
});

您还可以将多个 .then() 方法链式调用，以处理多个连续的异步操作。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功'); // Promise 已完成
  }, 1000);
});

promise.then(result => {
  // Promise 已完成时的第一个回调函数
  console.log(result); // 输出：成功
  return '下一个操作的结果';
}).then(result => {
  // Promise 已完成时的第二个回调函数
  console.log(result); // 输出：下一个操作的结果
});

2. Promise.resolve() 方法

Promise.resolve() 方法可以将一个值包装成一个已完成的 Promise 对象。

const promise = Promise.resolve('成功');

promise.then(result => {
  // Promise 已完成时的回调函数
  console.log(result); // 输出：成功
});

3. Promise.reject() 方法

Promise.reject() 方法可以将一个值包装成一个已拒绝的 Promise 对象。

const promise = Promise.reject('失败');

promise.then(result => {
  // Promise 已完成时的回调函数
  console.log(result); // 不会执行
}, error => {
  // Promise 已拒绝时的回调函数
  console.log(error); // 输出：失败
});

Promise 的高级方法

1. Promise.all() 方法

Promise.all() 方法可以将多个 Promise 实例包装成一个新的 Promise 实例。当所有传入的 Promise 实例都完成时，新的 Promise 实例才会完成。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功1'); // Promise 已完成
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功2'); // Promise 已完成
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功3'); // Promise 已完成
  }, 3000);
});

Promise.all([promise1, promise2, promise3]).then(results => {
  // 所有 Promise 都已完成时的回调函数
  console.log(results); // 输出：[ '成功1', '成功2', '成功3' ]
});

2. Promise.race() 方法

Promise.race() 方法可以将多个 Promise 实例包装成一个新的 Promise 实例。当任何一个传入的 Promise 实例完成或拒绝时，新的 Promise 实例都会立即完成或拒绝。

const promise1 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功1'); // Promise 已完成
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功2'); // Promise 已完成
  }, 2000);
});

const promise3 = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    reject('失败3'); // Promise 已拒绝
  }, 3000);
});

Promise.race([promise1, promise2, promise3]).then(result => {
  // 任意一个 Promise 已完成或拒绝时的回调函数
  console.log(result); // 输出：成功1
}, error => {
  // 任意一个 Promise 已拒绝时的回调函数
  console.log(error); // 不会执行
});

3. Promise.catch() 方法

Promise.catch() 方法可以为 Promise 实例添加一个错误处理程序。当 Promise 实例被拒绝时，错误处理程序会被调用。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    reject('失败'); // Promise 已拒绝
  }, 1000);
});

promise.catch(error => {
  // Promise 已拒绝时的错误处理程序
  console.log(error); // 输出：失败
});

4. Promise.finally() 方法

Promise.finally() 方法可以为 Promise 实例添加一个 finally 处理程序。无论 Promise 实例是完成还是拒绝，finally 处理程序都会被调用。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    resolve('成功'); // Promise 已完成
  }, 1000);
});

promise.finally(() => {
  // Promise 已完成或拒绝时的 finally 处理程序
  console.log('finally'); // 输出：finally
});