JS Promise原理|极客笔记

JS Promise原理

在编写JavaScript代码时，可能会遇到一些异步操作，如网络请求、定时器等。在处理这些异步操作时，我们通常会使用回调函数来处理异步结果。然而，随着代码逻辑的复杂性增加，回调地狱、回调嵌套等问题也随之而来，这使得代码难以维护和扩展。为了解决这些问题，ES6引入了Promise对象，它提供了一种更加优雅和可靠的方式来处理异步操作。

Promise的概念

Promise对象代表一个异步操作的最终结果。一个Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当一个操作是异步的时候，函数会立刻返回一个pending状态的Promise对象，然后在异步操作完成后，再根据操作结果将Promise对象转为fulfilled或rejected状态。

Promise对象有两个重要的方法：then和catch。then方法可以接受两个参数，第一个参数是Promise状态变为fulfilled时的回调函数，第二个参数是Promise状态变为rejected时的回调函数；catch方法是then方法的语法糖，专门用来捕获Promise状态变为rejected时的情况。

// 示例代码
const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random >= 0.5) {
      resolve(random);
    } else {
      reject('Error');
    }
  }, 1000);
});

promise.then((data) => {
  console.log('成功：', data);
}).catch((error) => {
  console.log('失败：', error);
});

在示例代码中，我们首先创建了一个Promise对象promise，在Promise的构造函数中执行了一个异步操作，并根据操作结果调用了resolve或reject函数。在then方法中，我们传入了两个回调函数分别处理Promise状态为fulfilled和rejected的情况。当异步操作结束后，根据随机数的大小，我们会在控制台输出不同的结果。

Promise的实现原理

Promise的实现原理并不复杂，主要是通过类的设计和状态机来完成的。下面是Promise的简单实现：

class MyPromise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;

    const resolve = (value) => {
      if (this.status === 'pending') {
        this.status = 'fulfilled';
        this.value = value;
      }
    };

    const reject = (reason) => {
      if (this.status === 'pending') {
        this.status = 'rejected';
        this.reason = reason;
      }
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    if (this.status === 'fulfilled') {
      onFulfilled(this.value);
    } else if (this.status === 'rejected') {
      onRejected(this.reason);
    }
  }

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

const promise = new MyPromise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random >= 0.5) {
      resolve(random);
    } else {
      reject('Error');
    }
  }, 1000);
});

promise.then((data) => {
  console.log('成功：', data);
}).catch((error) => {
  console.log('失败：', error);
});

在上面的示例中，我们按照Promise的标准实现了一个简易版的Promise。在构造函数中，我们初始化了Promise对象的状态和值，并通过resolve和reject函数来改变Promise对象的状态。在then方法中，我们根据Promise对象的状态来执行相应的回调函数。在catch方法中，我们专门捕获状态为rejected的情况。

Promise的链式调用

Promise的一个重要特性是支持链式调用。通过这种方式，我们可以写出更加直观、简洁的代码，避免了回调地狱的问题。当一个Promise对象的then方法返回一个新的Promise对象时，就可以实现链式调用。

// 示例代码
const promise = new Promise((resolve, reject) => {
  // 模拟异步操作
  setTimeout(() => {
    const random = Math.random();
    if (random >= 0.5) {
      resolve(random);
    } else {
      reject('Error');
    }
  }, 1000);
});

promise.then((data) => {
  console.log('第一次成功：', data);
  return data * 2;
}).then((data) => {
  console.log('第二次成功：', data);
  return data * 3;
}).then((data) => {
  console.log('第三次成功：', data);
}).catch((error) => {
  console.log('失败：', error);
});

在示例代码中，我们通过链式调用的方式依次处理了异步操作的结果。在then方法中，我们可以返回一个新的Promise对象，这样就可以将后续的处理逻辑传递给下一个then方法。通过这种方式，我们可以在不断的链式调用中处理多个异步操作并依次传递处理结果。

Promise.all和Promise.race

除了基本的Promise对象外，ES6还提供了Promise.all和Promise.race两个工具方法。Promise.all方法用于处理多个Promise对象，当所有Promise对象都变为fulfilled时，Promise.all的结果是一个包含所有Promise结果的数组；当有一个Promise对象变为rejected时，Promise.all也会变为rejected状态。Promise.race方法和Promise.all类似，区别在于只要有一个Promise对象变为fulfilled或rejected，Promise.race就会返回相应的结果。

// 示例代码
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise1');
  }, 1000);
});

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

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Error');
  }, 3000);
});

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log('Promise.all 成功：', results);
  })
  .catch((error) => {
    console.log('Promise.all 失败：', error);
  });

Promise.race([promise1, promise2, promise3])
  .then((result) => {
    console.log('Promise.race 成功：', result);
  })
  .catch((error) => {
    console.log('Promise.race 失败：', error);
  });

在示例代码中，我们创建了三个Promise对象promise1、promise2和promise3，并利用Promise.all和Promise.race方法对它们进行处理。在Promise.all的结果处理中，我们会等待所有Promise对象都返回结果后，才会处理最终结果；而在Promise.race的结果处理中，只要有一个Promise对象返回结果，就会处理最终结果。