剖析Promise：解析规范与动手实现，尽悉异步编程精髓！

前端

2023-11-15 08:34:53

在现代前端开发中，异步编程已成为不可或缺的一部分，而Promise无疑是其中最闪亮的新星。它以清晰简洁的调用方式，以及对异步操作的卓越驾驭能力，让异步编程变得前所未有地简单高效。

作为一名技术爱好者，想要深入掌握异步编程，全面理解Promise是必不可少的。因此，本文将从剖析Promise规范入手，逐步揭开它的神秘面纱，再结合动手实现一版Promise，让你全面掌握Promise的方方面面，成为异步编程的大师！

Promise规范解析

Promise规范定义了Promise的行为和调用方式，是理解和使用Promise的关键。规范规定，Promise必须具备以下基本特征：

状态：Promise有三种状态，分别是Pending（等待）、Fulfilled（已完成）和Rejected（已失败）。
结果：Promise在完成或失败时都会产生一个结果，成功时为Fulfilled Result，失败时为Rejected Result。
回调函数：Promise提供then和catch两个回调函数，用于处理成功和失败的结果。
链式调用：Promise支持链式调用，即可以通过then方法将多个Promise连接起来，形成一个异步操作的流水线。

Promise实现一览

掌握了Promise规范后，我们就可以动手实现一版Promise了。这里，我们提供了一个简化版的实现，帮助你理解Promise的内部工作原理：

class Promise {
  constructor(executor) {
    this.state = 'pending';
    this.result = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

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

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

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

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

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

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

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

  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            const result = onFulfilled(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            const result = onRejected(this.result);
            resolve(result);
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onFulfilled(this.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              const result = onRejected(this.result);
              resolve(result);
            } catch (error) {
              reject(error);
            }
          }, 0);
        });
      }
    });
  }

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

这个实现虽然简单，但它涵盖了Promise的核心概念和行为，让你对Promise的运作方式有一个清晰的认识。

实战演练：使用Promise

理解了Promise的规范和实现后，我们就可以在实际开发中运用它来处理异步操作了。下面是一个示例，展示如何使用Promise来获取用户输入：

const getUserInput = () => {
  return new Promise((resolve, reject) => {
    const inputElement = document.getElementById('user-input');

    inputElement.addEventListener('input', (event) => {
      resolve(event.target.value);
    });
  });
};

getUserInput()
  .then((input) => {
    console.log(`User input: ${input}`);
  })
  .catch((error) => {
    console.error(`Error: ${error}`);
  });