如何轻松上手 Promise，从入门到手写

前言

在ES6之前，对于一些异步任务的处理始终没有很好的方案可以解决，处理异步的方案可谓是十分混乱，在业务需求下异步请求的套用，就形成了回调地狱，严重影响代码的阅读性。而Promise的出现，给我们统一切入点去异步的进行任务的执行与管理，如今Promise已经成为了前端异步编程的利器。

Promise的基本用法

Promise是一个JavaScript对象，用于处理异步操作。它提供了一种简单且有效的方式来处理异步操作，并避免了回调地狱。

Promise有三种状态：

• Pending ：这是Promise的初始状态。
• Fulfilled ：这是Promise成功完成的状态。
• Rejected ：这是Promise失败的状态。

你可以使用.then()方法来处理成功的Promise，使用.catch()方法来处理失败的Promise。

以下是一个使用Promise的简单示例：

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

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

手写Promise

你可以自己手写Promise，以更好地理解Promise的内部机制。以下是如何手写Promise的步骤：

1. 定义一个Promise类。
2. 在Promise类中定义一个构造函数，该构造函数接受两个参数：resolve和reject。
3. 在构造函数中，将Promise的状态设置为Pending。
4. 在构造函数中，提供两个方法：resolve和reject。resolve方法将Promise的状态设置为Fulfilled，并传递一个值作为参数。reject方法将Promise的状态设置为Rejected，并传递一个错误对象作为参数。
5. 在构造函数中，提供一个then方法，该方法接受两个参数：onFulfilled和onRejected。onFulfilled方法在Promise的状态为Fulfilled时被调用，onRejected方法在Promise的状态为Rejected时被调用。

以下是如何手写Promise的示例：

class Promise {
  constructor(resolve, reject) {
    this.status = 'Pending';
    this.value = undefined;
    this.error = undefined;

    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolvePromise = (value) => {
      if (this.status !== 'Pending') {
        return;
      }

      this.status = 'Fulfilled';
      this.value = value;

      this.onFulfilledCallbacks.forEach((callback) => {
        callback(value);
      });
    };

    const rejectPromise = (error) => {
      if (this.status !== 'Pending') {
        return;
      }

      this.status = 'Rejected';
      this.error = error;

      this.onRejectedCallbacks.forEach((callback) => {
        callback(error);
      });
    };

    resolve(resolvePromise);
    reject(rejectPromise);
  }

  then(onFulfilled, onRejected) {
    if (this.status === 'Fulfilled') {
      onFulfilled(this.value);
    } else if (this.status === 'Rejected') {
      onRejected(this.error);
    } else {
      this.onFulfilledCallbacks.push(onFulfilled);
      this.onRejectedCallbacks.push(onRejected);
    }

    return this;
  }
}

总结

Promise是一种JavaScript对象，用于处理异步操作。它提供了一种简单且有效的方式来处理异步操作，并避免了回调地狱。你可以使用.then()方法来处理成功的Promise，使用.catch()方法来处理失败的Promise。你也可以自己手写Promise，以更好地理解Promise的内部机制。