两年前端经验还不会手写Promise?

开发 前端
Promise是一种代表异步操作最终完成或失败的对象。它是ES6中新增的语法特性,通过Promise对象,可以更加优雅地处理异步操作。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦Promise的状态发生改变,就不会再变。

什么是promise?

当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码难以维护,产生回调地狱(Callback Hell)。Promise就是一种用于解决异步编程问题的解决方案。

概念?

Promise是一种代表异步操作最终完成或失败的对象。它是ES6中新增的语法特性,通过Promise对象,可以更加优雅地处理异步操作。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。一旦Promise的状态发生改变,就不会再变。

Promise的作用:

  1. 异步操作的管理: Promise提供了一种标准的方式来管理异步操作,使得代码更加清晰易读。
  2. 解决回调地狱问题: Promise的链式调用(Chaining)可以避免多层嵌套的回调函数,使代码结构更加清晰。
  3. 错误处理: Promise提供了统一的错误处理机制,通过catch方法可以捕获Promise链中的错误,避免了未捕获的异常。
  4. 并行和串行执行: Promise可以串行或并行执行多个异步操作,并通过Promise.all和Promise.race等方法来管理多个Promise实例的状态。

Promise的方法:

  1. then(onFulfilled, onRejected): then方法用于注册Promise的成功和失败回调,并返回一个新的Promise,可以实现链式调用。
  2. catch(onRejected): catch方法用于捕获Promise链中的错误,并返回一个新的Promise,用于处理错误。
  3. finally(onFinally): finally方法用于注册一个回调函数,无论Promise的状态如何都会被调用。
  4. Promise.resolve(value): Promise.resolve方法用于将一个值包装成Promise对象,如果参数是Promise实例,则直接返回该实例。
  5. Promise.reject(reason): Promise.reject方法用于返回一个状态为rejected的Promise对象,并将指定的原因传递给Promise的回调函数。
  6. Promise.all(iterable): Promise.all方法用于将多个Promise实例包装成一个新的Promise实例,当所有Promise实例的状态都变为fulfilled时,新的Promise的状态才变为fulfilled;当其中一个Promise实例的状态变为rejected时,新的Promise的状态就变为rejected。
  7. Promise.race(iterable): Promise.race方法用于将多个Promise实例包装成一个新的Promise实例,当其中一个Promise实例的状态发生改变时,新的Promise的状态就跟着改变。
  8. Promise.allSettled(iterable): Promise.allSettled方法用于将多个Promise实例包装成一个新的Promise实例,无论这些Promise的状态如何,最终返回的Promise实例的状态都会变为fulfilled,返回的结果是一个包含所有Promise的状态和结果的数组。

实现Promise的重点

如果要手写Promise,那就需要先理清楚重点,然后实现主,要集中在以下几个方面:

  1. 状态管理: Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。在Promise的生命周期中,它会从pending状态转变为fulfilled或rejected状态,一旦状态改变就不可再变。状态的变化由Promise的执行器函数中的resolve和reject函数触发。
  2. 链式调用: Promise允许通过then方法链式调用,每次调用then都会返回一个新的Promise实例,以实现更加灵活的异步操作。通过链式调用,可以串联多个异步操作,并在每个操作完成后执行特定的处理逻辑。
  3. 错误处理: Promise提供了catch方法用于捕获Promise链中的错误。在Promise链中,如果某个Promise发生了rejected状态,它会沿着链路向下传递,直到被catch方法捕获到错误,或者如果没有捕获到错误,则会导致未捕获的异常。
  4. 异步执行: Promise的then方法中的回调函数会在当前执行栈执行完成后,通过事件循环机制被放入下一个事件循环中执行,这样可以保证回调函数总是在当前代码执行完成后执行,从而实现异步操作。
  5. 解决回调地狱问题: Promise的链式调用可以解决回调地狱(Callback Hell)的问题,使得代码更加清晰易读。通过Promise,可以更加优雅地处理多个异步操作的串行或并行执行,避免了深度嵌套的回调函数。

实现Promise

在知道Promise的概念以及重点之后,我们来简单实现一下:

class MyPromise {
  constructor(executor) {
    // 初始化Promise的状态为pending
    this.state = 'pending';
    // 存储Promise的成功值
    this.value = undefined;
    // 存储Promise的失败原因
    this.reason = undefined;
    // 存储成功状态下的回调函数数组
    this.onResolvedCallbacks = [];
    // 存储失败状态下的回调函数数组
    this.onRejectedCallbacks = [];


    // 定义resolve函数,用于将Promise状态从pending改变为fulfilled
    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        // 执行成功状态下的回调函数数组中的每个回调函数
        this.onResolvedCallbacks.forEach(callback => callback());
      }
    };


    // 定义reject函数,用于将Promise状态从pending改变为rejected
    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 执行失败状态下的回调函数数组中的每个回调函数
        this.onRejectedCallbacks.forEach(callback => callback());
      }
    };


    try {
      // 执行executor函数,并将resolve和reject函数作为参数传递给executor
      executor(resolve, reject);
    } catch (error) {
      // 如果executor执行过程中发生了错误,则将Promise状态改变为rejected
      reject(error);
    }
  }


  // then方法用于注册Promise的成功和失败回调,并返回一个新的Promise
  then(onFulfilled, onRejected) {
    // 创建一个新的Promise实例
    const newPromise = new MyPromise((resolve, reject) => {
      // 当前Promise的状态为fulfilled时
      if (this.state === 'fulfilled') {
        // 异步执行onFulfilled回调函数,并处理返回值result
        setTimeout(() => {
          try {
            const result = onFulfilled(this.value);
            // 将返回值result传递给resolvePromise函数,处理新Promise的状态
            resolvePromise(newPromise, result, resolve, reject);
          } catch (error) {
            // 如果执行onFulfilled回调函数过程中发生了错误,则将新Promise的状态改为rejected
            reject(error);
          }
        }, 0);
      }


      // 当前Promise的状态为rejected时
      if (this.state === 'rejected') {
        // 异步执行onRejected回调函数,并处理返回值result
        setTimeout(() => {
          try {
            const result = onRejected(this.reason);
            // 将返回值result传递给resolvePromise函数,处理新Promise的状态
            resolvePromise(newPromise, result, resolve, reject);
          } catch (error) {
            // 如果执行onRejected回调函数过程中发生了错误,则将新Promise的状态改为rejected
            reject(error);
          }
        }, 0);
      }


      // 当前Promise的状态为pending时
      if (this.state === 'pending') {
        // 将成功和失败回调函数分别添加到对应的回调函数数组中
        this.onResolvedCallbacks.push(() => {
          // 异步执行成功回调函数,并处理返回值result
          setTimeout(() => {
            try {
              const result = onFulfilled(this.value);
              // 将返回值result传递给resolvePromise函数,处理新Promise的状态
              resolvePromise(newPromise, result, resolve, reject);
            } catch (error) {
              // 如果执行成功回调函数过程中发生了错误,则将新Promise的状态改为rejected
              reject(error);
            }
          }, 0);
        });


        this.onRejectedCallbacks.push(() => {
          // 异步执行失败回调函数,并处理返回值result
          setTimeout(() => {
            try {
              const result = onRejected(this.reason);
              // 将返回值result传递给resolvePromise函数,处理新Promise的状态
              resolvePromise(newPromise, result, resolve, reject);
            } catch (error) {
              // 如果执行失败回调函数过程中发生了错误,则将新Promise的状态改为rejected
              reject(error);
            }
          }, 0);
        });
      }
    });


    // 返回新的Promise实例
    return newPromise;
  }
}


// resolvePromise函数用于处理then方法中回调函数返回的结果
function resolvePromise(newPromise, result, resolve, reject) {
  // 如果新的Promise和返回值是同一个对象,则抛出错误
  if (newPromise === result) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }


  // 如果返回值是Promise实例,则等待该Promise的状态改变,并根据其状态决定新Promise的状态
  if (result instanceof MyPromise) {
    result.then(resolve, reject);
  } else {
    // 如果返回值不是Promise实例,则将返回值传递给resolve函数,将新Promise的状态改变为fulfilled
    resolve(result);
  }
}

这段代码实现了一个非常基础的Promise,主要有以下几个部分:

  1. 构造函数:

构造函数接受一个执行器函数作为参数,在构造函数内部定义了resolve和reject函数,并执行了执行器函数。执行器函数接受两个参数,分别是resolve和reject,它们分别用于将Promise状态从pending改变为fulfilled和rejected。

执行器函数中通过try...catch块捕获可能的异常,并在捕获到异常时将Promise状态改变为rejected。

  1. then方法:

then方法用于注册Promise的成功和失败回调,并返回一个新的Promise。它接受两个参数,分别是成功回调onFulfilled和失败回调onRejected。

在then方法内部,根据当前Promise的状态(pending、fulfilled、rejected),分别处理执行成功和执行失败的逻辑,并在异步环境下使用setTimeout确保执行顺序。

如果then方法中的回调函数返回了一个Promise,则等待该Promise的状态改变,并根据其状态决定新的Promise的状态。

  1. resolvePromise函数:

resolvePromise函数用于处理then方法中回调函数返回的结果。如果结果是一个Promise,则等待该Promise的状态改变,并根据其状态决定新的Promise的状态。


责任编辑:武晓燕 来源: 海燕技术栈
相关推荐

2023-10-18 16:25:23

2009-09-22 10:07:58

2014-05-04 10:38:40

手游创业

2020-06-30 16:01:39

Kubernetes自动化部署

2022-04-15 09:48:53

漏洞Apache修复方案

2017-12-25 16:31:33

前端程序员

2021-02-27 09:26:54

Kubernetes容器化云计算

2016-03-21 10:54:55

vine产品经验

2021-05-19 05:39:03

数据恢复软件电脑

2022-08-01 08:17:46

mysqlwindows系统

2021-03-16 15:12:57

CompletableFuture机制java

2021-02-05 08:09:19

前端框架开发

2009-09-27 16:09:30

CCIE证书

2014-07-03 13:59:00

创业跳槽

2020-10-23 10:10:59

Promise前端代码

2022-06-13 09:26:41

Promise前端代码

2022-09-09 14:56:18

Linuxcpu

2019-04-24 13:28:17

大数据大数据开发可视化

2023-08-27 21:47:15

2019-07-18 15:20:22

前端技术PWA
点赞
收藏

51CTO技术栈公众号