深入解析Promise：源码揭秘与实战技巧

Promise 是 JavaScript 中一种用于异步编程的重要机制，它让异步操作的编写变得更加简洁和易于管理。本文将深入解析 Promise 的概念、源码实现以及一些实用的实战技巧。

一、Promise 的基本概念

Promise 是一个对象，它代表了某个异步操作最终完成（或失败）的状态。它有三个状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 对象具有 then 和 catch 方法，分别用于处理成功和失败的情况。

let promise = new Promise((resolve, reject) => {
  // 执行异步操作
  setTimeout(() => {
    resolve('成功');
  }, 1000);
});

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

二、Promise 的源码解析

下面是一个简单的 Promise 源码实现，用于理解其内部机制。

function Promise(executor) {
  let self = this;
  self.status = 'pending';
  self.value = undefined;
  self.reason = undefined;
  self.onFulfilled = [];
  self.onRejected = [];

  function resolve(value) {
    if (self.status === 'pending') {
      self.status = 'fulfilled';
      self.value = value;
      self.onFulfilled.forEach(fn => fn());
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.status = 'rejected';
      self.reason = reason;
      self.onRejected.forEach(fn => fn());
    }
  }

  try {
    executor(resolve, reject);
  } catch (error) {
    reject(error);
  }
}

Promise.prototype.then = function(onFulfilled, onRejected) {
  let self = this;
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };

  if (self.status === 'fulfilled') {
    onFulfilled(self.value);
  }

  if (self.status === 'rejected') {
    onRejected(self.reason);
  }

  if (self.status === 'pending') {
    self.onFulfilled.push(() => {
      onFulfilled(self.value);
    });
    self.onRejected.push(() => {
      onRejected(self.reason);
    });
  }
};

三、Promise 的实战技巧

1. 链式调用：Promise 支持链式调用，方便进行异步操作。

let promise1 = new Promise((resolve, reject) => {
  resolve('成功');
});

let promise2 = promise1.then(value => {
  return value + '，继续成功';
});

promise2.then(value => {
  console.log(value); // 输出：成功，继续成功
});

1. 错误处理：使用 catch 方法处理 Promise 链中的错误。

let promise1 = new Promise((resolve, reject) => {
  reject('失败');
});

promise1.then(value => {
  console.log(value);
}).catch(error => {
  console.error(error); // 输出：失败
});

1. Promise.all：并行执行多个异步操作，等待所有操作完成。

let promise1 = new Promise((resolve, reject) => {
  resolve('成功1');
});

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

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

1. Promise.race：并行执行多个异步操作，等待第一个操作完成。

let promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功1');
  }, 1000);
});

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

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

四、总结

Promise 是 JavaScript 异步编程的重要工具，理解其概念、源码实现和实战技巧对于编写高效、简洁的异步代码至关重要。希望本文能帮助你更好地掌握 Promise。