Promise详解：告别回调地狱，拥抱异步编程新时代

前端

2024-01-15 06:23:16

Promise的概念和原理

Promise是一个JavaScript对象，用于表示异步操作的最终结果。它有三种状态：

Pending ：初始状态，表示异步操作尚未完成。
Fulfilled ：表示异步操作已成功完成，并带有结果值。
Rejected ：表示异步操作已失败，并带有错误信息。

Promise提供两个方法来处理异步操作的结果：

then() ：用于处理Fulfilled状态的Promise，并返回一个新的Promise。
catch() ：用于处理Rejected状态的Promise，并返回一个新的Promise。

Promise的使用场景

Promise主要用于以下场景：

异步数据请求 ：通过XMLHttpRequest、fetch API或其他异步方法获取数据时，可以使用Promise来处理请求结果。
定时任务 ：使用setTimeout或setInterval等定时任务时，可以使用Promise来处理任务完成后的结果。
事件处理 ：监听DOM事件或其他事件时，可以使用Promise来处理事件触发后的结果。

Promise的优势

Promise相比于传统的回调函数，具有以下优势：

提高代码可读性 ：Promise使用链式调用语法，可以使代码更加清晰易读，避免回调函数嵌套导致的混乱。
增强代码可维护性 ：Promise可以轻松地处理异步操作的错误，使代码更加健壮和易于维护。
支持并发编程 ：Promise可以轻松地处理并发异步操作，使代码更加高效和可扩展。

Promise的手写实现

虽然JavaScript原生提供了Promise对象，但我们也可以自己手写实现一个简单的Promise。以下是如何实现一个基本的Promise：

class Promise {
  constructor(executor) {
    this.state = 'pending'; // 初始状态
    this.value = null; // 结果值
    this.error = null; // 错误信息
    this.onFulfilledCallbacks = []; // Fulfilled状态的回调函数队列
    this.onRejectedCallbacks = []; // Rejected状态的回调函数队列

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

  resolve(value) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'fulfilled';
    this.value = value;

    // 执行Fulfilled状态的回调函数
    this.onFulfilledCallbacks.forEach(callback => callback(this.value));
  }

  reject(error) {
    if (this.state !== 'pending') {
      return;
    }

    this.state = 'rejected';
    this.error = error;

    // 执行Rejected状态的回调函数
    this.onRejectedCallbacks.forEach(callback => callback(this.error));
  }

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      // 将Fulfilled状态的回调函数添加到队列
      this.onFulfilledCallbacks.push(() => {
        try {
          const result = onFulfilled(this.value);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });

      // 将Rejected状态的回调函数添加到队列
      this.onRejectedCallbacks.push(() => {
        try {
          const result = onRejected(this.error);
          resolve(result);
        } catch (error) {
          reject(error);
        }
      });
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }
}