重温Promise手写记录

前端

2024-01-12 13:22:08

异步编程的救星：深入解析Promise

在现代web开发中，处理异步操作是不可避免的。过去，回调函数和事件监听器是应对异步编程的主流方法，但它们往往导致难以维护且难以理解的代码。

Introducing Promise

Promise对象以其优雅和易于理解的语法，为异步编程带来了新的曙光。它是表示异步操作最终完成或失败及其结果值的一种独特机制。

Promise有三种关键状态：

Pending： 异步操作正在进行中。
Fulfilled： 异步操作成功完成，返回结果值。
Rejected： 异步操作发生错误，返回错误信息。

Promise的特性

Promise具有以下关键特性：

一旦创建，其状态不可改变。
提供then()方法添加异步操作完成时的回调函数。
提供catch()方法添加异步操作失败时的回调函数。
提供finally()方法添加在任何情况下都会执行的回调函数。

自定义Promise实现

以下是一个简单的自定义Promise实现：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.callbacks = [];
    this.errors = [];
    this.finallyCbs = [];

    const resolve = (result) => {
      if (this.state !== 'pending') return;

      this.state = 'fulfilled';
      this.result = result;

      this.callbacks.forEach((callback) => {
        callback(result);
      });

      this.finallyCbs.forEach((callback) => {
        callback();
      });
    };

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

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

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

      this.finallyCbs.forEach((callback) => {
        callback();
      });
    };

    executor(resolve, reject);
  }

  then(callback) {
    if (this.state === 'pending') {
      this.callbacks.push(callback);
    } else if (this.state === 'fulfilled') {
      callback(this.result);
    }
    return this;
  }

  catch(callback) {
    if (this.state === 'pending') {
      this.errors.push(callback);
    } else if (this.state === 'rejected') {
      callback(this.result);
    }
    return this;
  }

  finally(callback) {
    this.finallyCbs.push(callback);
    return this;
  }
}

Promise A+规范

为了确保跨平台的一致性，ECMA国际标准化组织制定了Promise A+规范。该规范定义了Promise对象的行为，包括状态转换规则和回调函数执行顺序。

Promise的使用

使用Promise非常简单，只需三个步骤：

创建一个Promise对象。
在Promise对象中添加回调函数。
在异步操作完成后，调用resolve()或reject()方法改变Promise对象的状态。

以下是一个示例：

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

promise.then((result) => {
  console.log(result); // '成功'
});