简单说说promise

89 阅读2分钟

promise是什么

Promise 是 JavaScript 提供的一种用于异步编程的解决方案。Promise 代表着一个异步操作的最终完成或失败,并且可以返回其最终结果或失败原因。

一个 Promise 对象有三种状态

  • pending(进行中):初始状态,既不是成功,也不是失败状态。
  • fulfilled(已成功):意味着操作成功完成,并返回了一个值。
  • rejected(已失败):意味着操作失败,返回了一个错误信息。

Promise:then() 方法和 catch() 方法是用于处理 Promise 对象的状态变化的回调方法。其中,then() 方法用于处理已成功的 Promise,catch() 方法用于处理已失败的 Promise。

为什么会有promise

Promise 的好处在于它可以避免回调地狱,也就是多个异步操作嵌套使用时所产生的代码结构复杂、难以维护的问题。Promise 还可以方便地进行错误处理和 Promise 链式调用,提高了代码的可读性和可维护性。

如何手写一个promise

要手写一个 Promise,需要了解它的几个核心组成部分:resolverejectthen 函数。以下是一个简单的 Promise 实现示例:

class MyPromise {
  constructor(callback) {
    // 保存状态和结果值
    this.state = 'pending';
    this.value = null;

    // 定义 resolve 函数
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
      }
    };

    // 定义 reject 函数
    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.value = reason;
      }
    };

    // 执行回调函数
    try {
      callback(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    // 如果没有传入成功&失败回调,将状态和结果向下传递
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; };
    
    // 如果状态为成功,则执行成功回调,并返回 Promise
    if (this.state === 'fulfilled') {
      return new MyPromise((resolve) => {
        try {
          const nextValue = onFulfilled(this.value);
          resolve(nextValue);
        } catch (error) {
          reject(error);
        }
      });
    }

    // 如果状态为失败,则执行失败回调,并返回 Promise
    if (this.state === 'rejected') {
      return new MyPromise((resolve, reject) => {
        try {
          const nextValue = onRejected(this.value);
          resolve(nextValue);
        } catch (error) {
          reject(error);
        }
      });
    }

    // 如果状态为等待,则返回 Promise
    if (this.state === 'pending') {
      return new MyPromise((resolve, reject) => {          
        // 将回调保存到队列中,待 Promise 状态变更后执行
        this.onFulfilledCallbacks.push(() => {
          try {
            const nextValue = onFulfilled(this.value);
            resolve(nextValue);
          } catch (error) {
            reject(error);
          }
        });

        this.onRejectedCallbacks.push(() => {
          try {
            const nextValue = onRejected(this.value);
            resolve(nextValue);
          } catch (error) {
            reject(error);
          }
        });
      });
    }
  }
}

这个 Promise 示例支持传入一个回调函数来执行异步操作,它的状态可以在回调函数执行成功后转为“已完成”,在回调函数执行失败后转为“已拒绝”,同时支持链式调用 then 函数,以及回调中的返回值可以传递到链式调用的下一个 Promise。当然这个示例还不够完善,但是它提供了一个基本的实现思路。