Promise的强大功能：一步步掌握Promise的精髓

前端

2023-12-09 09:12:27

Promise是一种JavaScript对象，它表示一个异步操作的最终结果。无论是成功还是失败，它都能捕获并处理异步操作的结果。Promise为异步编程提供了优雅且可控的方式，让我们深入探讨Promise的强大功能，一步步掌握其精髓。

Promise的基本原理

Promise通过两个基本函数创建：resolve和reject。当异步操作成功时，resolve函数用于通知Promise操作已完成并返回结果。而reject函数则用于在操作失败时通知Promise并返回错误信息。

静态方法：Promise.X

Promise提供了几个静态方法来处理多个Promise或创建新的Promise：

Promise.resolve(value)： 创建并立即解决一个新的Promise，返回值为value。
Promise.reject(error)： 创建并立即拒绝一个新的Promise，返回错误error。
Promise.all(promises)： 创建一个新的Promise，当所有给定的promises都解决后才解决。
Promise.race(promises)： 创建一个新的Promise，当任何一个给定的promises解决或拒绝后立即解决或拒绝。
Promise.allSettled(promises)： 创建一个新的Promise，当所有给定的promises都解决或拒绝后才解决，无论成功还是失败。

原型方法：Promise.prototype.X

每个Promise实例都附带一组原型方法来处理结果：

then(onFulfilled, onRejected)： 添加回调函数，当Promise解决或拒绝时执行。
catch(onRejected)： 添加回调函数，仅在Promise拒绝时执行。
finally(onFinally)： 添加回调函数，无论Promise解决还是拒绝都执行。

Promise的链式操作

Promise支持链式操作，这使我们能够以整齐的方式处理多个异步操作。使用then()方法，我们可以将一个Promise的结果传递给另一个Promise作为输入。这样就可以构建一个Promise链，从而简化异步代码的编写。

手写Promise的常用API

我们可以自己编写Promise的常用API来模拟Promise对象的行为。以下是几个关键API的实现：

function Promise() {
  this.state = 'pending';
  this.result = undefined;
  this.callbacks = [];
}

Promise.prototype.resolve = function(result) {
  if (this.state !== 'pending') return;
  this.state = 'fulfilled';
  this.result = result;
  this.callbacks.forEach(callback => callback.onFulfilled(result));
};

Promise.prototype.reject = function(error) {
  if (this.state !== 'pending') return;
  this.state = 'rejected';
  this.result = error;
  this.callbacks.forEach(callback => callback.onRejected(error));
};

Promise.prototype.then = function(onFulfilled, onRejected) {
  return new Promise((resolve, reject) => {
    this.callbacks.push({
      onFulfilled: result => {
        if (typeof onFulfilled === 'function') {
          const nextResult = onFulfilled(result);
          if (nextResult instanceof Promise) {
            nextResult.then(resolve, reject);
          } else {
            resolve(nextResult);
          }
        } else {
          resolve(result);
        }
      },
      onRejected: error => {
        if (typeof onRejected === 'function') {
          const nextResult = onRejected(error);
          if (nextResult instanceof Promise) {
            nextResult.then(resolve, reject);
          } else {
            reject(nextResult);
          }
        } else {
          reject(error);
        }
      }
    });
  });
};

Promise.prototype.catch = function(onRejected) {
  return this.then(undefined, onRejected);
};

Promise.prototype.finally = function(onFinally) {
  return this.then(
    result => Promise.resolve(onFinally()).then(() => result),
    error => Promise.resolve(onFinally()).then(() => { throw error; })
  );
};

Promise.resolve = function(value) {
  return new Promise((resolve, reject) => resolve(value));
};

Promise.reject = function(error) {
  return new Promise((resolve, reject) => reject(error));
};

Promise.all = function(promises) {
  return new Promise((resolve, reject) => {
    if (!promises || promises.length === 0) {
      resolve([]);
      return;
    }
    let completed = 0;
    let results = [];
    promises.forEach((promise, index) => {
      promise.then(result => {
        results[index] = result;
        completed++;
        if (completed === promises.length) {
          resolve(results);
        }
      }, error => reject(error));
    });
  });
};

Promise.race = function(promises) {
  return new Promise((resolve, reject) => {
    if (!promises || promises.length === 0) {
      resolve();
      return;
    }
    promises.forEach(promise => {
      promise.then(result => resolve(result), error => reject(error));
    });
  });
};

Promise.allSettled = function(promises) {
  return new Promise((resolve, reject) => {
    if (!promises || promises.length === 0) {
      resolve([]);
      return;
    }
    let completed = 0;
    let results = [];
    promises.forEach((promise, index) => {
      promise.then(result => {
        results[index] = { status: 'fulfilled', value: result };
        completed++;
        if (completed === promises.length) {
          resolve(results);
        }
      }, error => {
        results[index] = { status: 'rejected', reason: error };
        completed++;
        if (completed === promises.length) {
          resolve(results);
        }
      });
    });
  });
};