从入门到手写，Promise带您纵览异步编程新篇章

2023-09-20 13:38:15

现在就让我们一起踏上Promise学习之旅，从基本用法到亲手编写，为您呈现异步编程新境界。与回调地狱告别，开启清晰、优雅的代码书写新篇章。

一、邂逅Promise，告别回调地狱

在前端开发中，异步编程不可或缺，它允许我们处理耗时较长的任务，同时不会阻塞主线程。传统的回调函数，在处理多个异步任务时，会造成回调地狱，即回调函数层层嵌套，代码结构混乱，难以维护。

Promise的出现，为异步编程带来了新的曙光。它提供了一种更优雅、更易于管理的方式来处理异步任务。当我们调用一个异步函数时，它会返回一个Promise对象。这个Promise对象有两个状态：fulfilled（已完成）和rejected（已拒绝）。当异步任务成功完成时，Promise对象会转为fulfilled状态，并携带结果值；当异步任务失败时，Promise对象会转为rejected状态，并携带错误信息。

二、Promise基本用法，掌握核心技巧

Promise的基本用法很简单，我们首先创建一个Promise对象，然后通过then()方法来注册成功和失败的回调函数。例如：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (condition) {
    resolve(result);
  } else {
    reject(error);
  }
});

promise.then(
  (result) => {
    // 处理成功的结果
  },
  (error) => {
    // 处理失败的错误
  }
);

我们还可以使用catch()方法来处理失败的情况，它与then()方法的第二个参数功能相同，但更简洁。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (condition) {
    resolve(result);
  } else {
    reject(error);
  }
});

promise
  .then((result) => {
    // 处理成功的结果
  })
  .catch((error) => {
    // 处理失败的错误
  });

三、链式调用，巧妙处理异步任务

Promise支持链式调用，我们可以将多个异步任务串联起来，并以一种非常直观的方式处理结果。例如：

const promise1 = new Promise((resolve, reject) => {
  // 异步操作1
  if (condition) {
    resolve(result1);
  } else {
    reject(error1);
  }
});

const promise2 = new Promise((resolve, reject) => {
  // 异步操作2
  if (condition) {
    resolve(result2);
  } else {
    reject(error2);
  }
});

promise1
  .then((result1) => {
    return promise2;
  })
  .then((result2) => {
    // 处理成功的结果
  })
  .catch((error) => {
    // 处理失败的错误
  });

四、手写Promise，探索内部机制

为了更深入地理解Promise，我们可以尝试自己动手实现一个简易的Promise。这是一个非常有意义的练习，它可以帮助我们更好地理解Promise的内部工作原理。

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((callback) => callback(this.value));
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach((callback) => callback(this.reason));
      }
    };

    executor(resolve, reject);
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        onFulfilled(this.value);
      } else if (this.state === 'rejected') {
        onRejected(this.reason);
      } else {
        this.onFulfilledCallbacks.push(() => {
          onFulfilled(this.value);
        });
        this.onRejectedCallbacks.push(() => {
          onRejected(this.reason);
        });
      }
    });
  }
}