超详细！全面搞懂手写Promise其过程

已于 2024-08-14 10:09:29 修改
阅读量673 收藏 12
点赞数 15
文章标签： 前端
于 2024-08-13 15:18:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36012563/article/details/141134607
版权

文章目录

1、概述

Promise是JavaScript中用于处理异步操作的一种方式。它提供了一种简洁且强大的方法来处理异步代码，避免了方法回调。本文将详细讲解如何从零开始手写一个Promise，帮助您深入理解其工作原理。

Promise有三种状态：

  1. Pending（待定）：初始状态，既不是成功也不是失败。
  2. Fulfilled（已兑现）：表示异步操作成功完成，并返回了一个成功值。
  3. Rejected（已拒绝）：表示异步操作失败，并返回了一个错误原因。

转换状态如下：

  • 从Pending状态可以转换成Fulfilled状态。
  • 从Pending状态可以转换成Rejected状态。
  • 一旦转换到Fulfilled或Rejected状态，Promise的状态就不可再改变。

2、常用方法

  1. Promise.resolve()：将给定的值转换为一个 Promise。如果该值本身就是一个 Promise，那么该 Promise将被返回；如果该值是一个 thenable对象，Promise.resolve()将调用其 then() 方法及其两个回调函数；否则，返回的 Promise将会以该值兑现。

  2. Promise.reject()：返回一个已拒绝（rejected）的 Promise对象，拒绝原因为给定的参数。

  3. Promise.all()：接受一个 Promise可迭代对象作为输入，并返回一个 Promise。当所有输入的 Promise都被兑现时，返回的 Promise也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。如果输入的任何 Promise被拒绝，则返回的 Promise将被拒绝，并带有第一个被拒绝的原因。

  4. Promise.any()：将一个 Promise可迭代对象作为输入，并返回一个 Promise。当输入的任何一个 Promise兑现时，这个返回的 Promise将会兑现，并返回第一个兑现的值。当所有输入 Promise都被拒绝（包括传递了空的可迭代对象）时，它会以一个包含拒绝原因数组的 AggregateError拒绝。

  5. Promise.race()：接受一个 Promise可迭代对象作为输入，并返回一个 Promise。这个返回的 Promise会随着第一个 Promise的敲定而敲定。

  6. Promise.allSettled()：将一个 Promise 可迭代对象作为输入，并返回一个单独的 Promise。当所有输入的 Promise 都已敲定时（包括传入空的可迭代对象时），返回的 Promise 将被兑现，并带有描述每个 Promise 结果的对象数组。

3、手写Promise

3.1、基本结构

首先，我们需要定义一个Promise类，并在其构造函数中初始化一些基本属性。

// 定义一个MyPromise类
class MyPromise {
  constructor(executor) {
    // 初始状态为pending
    this.state = 'pending';
    // 成功的值
    this.value = undefined;
    // 失败的原因
    this.reason = undefined;
    // 成功回调函数数组
    this.onFulfilledCallbacks = [];
    // 失败回调函数数组
    this.onRejectedCallbacks = [];

    // resolve函数，用于将Promise状态从pending变为fulfilled，并记录成功的值
    const resolve = value => {
      // 只有在pending状态下才进行状态转变并将成功值赋值
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        // 执行所有成功回调函数
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    // reject函数，用于将Promise状态从pending变为rejected，并记录失败的原因
    const reject = reason => {
      // 只有在pending状态下才进行状态转变并将原因赋值给失败的值
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 执行所有失败回调函数
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    // 执行executor函数，并将resolve和reject函数作为参数传入
    try {
      executor(resolve, reject);
    } catch (err) {
      // 如果executor函数执行出错，直接调用reject函数
      reject(err);
    }
  }
}

3.2、then 方法

then方法用于为Promise实例添加处理成功和失败的回调函数。

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  // 设置默认回调函数，确保函数类型，如果没有提供则使用默认处理函数
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
  onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };

  // 创建新的Promise，用于链式调用
  let promise2 = new MyPromise((resolve, reject) => {
    // 如果状态为fulfilled，执行成功回调。如果状态为rejected，执行失败回调
    if (this.state === 'fulfilled' || this.state === 'rejected') {
        setTimeout(() => {
          try {
            // 获取成功回调的返回值
            let result = this.state === 'fulfilled' ? onFulfilled(this.value) : onRejected(this.reason);
            // 处理返回值以确定promise2的状态
            resolvePromise(promise2, result, resolve, reject);
          } catch (e) {
            // 如果执行成功回调过程中出错，直接reject
            reject(e);
          }
        }, 0);
      }

    // 如果状态为pending，将回调函数存储起来
    if (this.state === 'pending') {
      this.onFulfilledCallbacks.push(() => {
        setTimeout(() => {
          try {
            // 获取成功回调的返回值
            let x = onFulfilled(this.value);
            // 处理返回值以确定promise2的状态
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            // 如果执行成功回调过程中出错，直接reject
            reject(e);
          }
        }, 0);
      });

      this.onRejectedCallbacks.push(() => {
        setTimeout(() => {
          try {
            // 获取失败回调的返回值
            let x = onRejected(this.reason);
            // 处理返回值以确定promise2的状态
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            // 如果执行失败回调过程中出错，直接reject
            reject(e);
          }
        }, 0);
      });
    }
  });

  // 返回新的Promise实例，实现链式调用
  return promise2;
};

3.3、resolvePromise 方法

resolvePromise方法用于处理then方法中返回的结果，以决定新的Promise的状态。

function resolvePromise(promise2, x, resolve, reject) {
  // 如果promise2和x相等，抛出TypeError防止死循环
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }

  let called;
  // 如果x是对象或函数
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      // 取出x的then方法
      let then = x.then;
      // 如果then是函数，调用then，传入resolvePromise和reject函数
      if (typeof then === 'function') {
        then.call(x, y => {
          if (called) return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, r => {
          if (called) return;
          called = true;
          reject(r);
        });
      } else {
        // 如果then不是函数，以x为值fulfill promise2
        resolve(x);
      }
    } catch (e) {
      // 如果取then方法出错，直接reject
      if (called) return;
      called = true;
      reject(e);
    }
  } else {
    // 如果x不是对象或函数，以x为值fulfill promise2
    resolve(x);
  }
}

3.4、catch 方法

catch方法是then方法的一个快捷方式，用于处理Promise中的错误。

MyPromise.prototype.catch = function(onRejected) {
  // catch方法其实就是调用then方法，但只传入失败回调
  return this.then(null, onRejected);
};

3.5、finally 方法

finally方法用于在Promise执行结束后，无论结果是成功还是失败，都会执行的回调函数。

MyPromise.prototype.finally = function(callback) {
  // finally方法接受一个回调函数，并在Promise结束时调用
  return this.then(
    value => {
      // 调用回调函数，并在它执行完毕后返回原值
      return MyPromise.resolve(callback()).then(() => value);
    },
    reason => {
      // 调用回调函数，并在它执行完毕后抛出原错误
      return MyPromise.resolve(callback()).then(() => { throw reason });
    }
  );
};

3.6、resolve 和 reject 方法

resolve方法用于快速创建一个成功的Promise，reject方法用于快速创建一个失败的Promise。

MyPromise.prototype.resolve = function(value) {
  // 直接返回一个新的成功状态的Promise
  return new MyPromise((resolve, reject) => {
    resolve(value);
  });
};

MyPromise.prototype.reject = function(reason) {
  // 直接返回一个新的失败状态的Promise
  return new MyPromise((resolve, reject) => {
    reject(reason);
  });
};

3.7、all 方法

all方法用于将多个Promise实例包装成一个新的Promise实例，只有所有Promise实例都成功时，新Promise实例才会成功。

MyPromise.prototype.all = function(promises) {
  // 返回一个新的Promise
  return new MyPromise((resolve, reject) => {
    // 存储所有Promise的结果
    let resultArray = [];
    // 记录已完成的Promise数量
    let count = 0;

    // 处理单个Promise的结果
    function processResult(index, data) {
      resultArray[index] = data;
      count++;
      // 如果所有Promise都完成，resolve新的Promise
      if (count === promises.length) {
        resolve(resultArray);
      }
    }

    // 遍历所有Promise，处理其结果
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(data => {
        processResult(i, data);
      }, reject);
    }
  });
};

3.8、race 方法

race方法用于将多个Promise实例包装成一个新的Promise实例，只要其中一个Promise实例率先完成，新Promise实例就会完成。

MyPromise.prototype.race = function(promises) {
  // 返回一个新的Promise
  return new MyPromise((resolve, reject) => {
    // 遍历所有Promise，任意一个Promise完成就resolve/reject新的Promise
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(resolve, reject);
    }
  });
};

3.9、any方法

any方法用于将多个Promise实例包装成一个新的Promise实例，只要其中一个Promise实例成功，新Promise实例就会成功；如果所有的Promise实例都失败，新Promise实例才会失败。

// any方法，任意一个Promise成功则返回成功，所有Promise失败则返回失败
  MyPromise.prototype.any = function(promises) {
    return new MyPromise((resolve, reject) => {
      let errors = [];
      let rejectedCount = 0;

      for (let i = 0; i < promises.length; i++) {
        promises[i].then(resolve, error => {
          errors[i] = error;
          rejectedCount++;
          if (rejectedCount === promises.length) {
            reject(new AggregateError(errors, 'All promises were rejected'));
          }
        });
      }
    });
  }

3.10、allSettled方法

allSettled方法用于将多个Promise实例包装成一个新的Promise实例，当所有的Promise实例都已完成（无论是成功还是失败）时，新Promise实例才会完成，并且返回一个对象数组，描述每个Promise的结果。

// allSettled方法，所有Promise都完成时返回包含每个Promise结果的数组
  MyPromise.prototype.allSettled = function(promises) {
    return new MyPromise((resolve) => {
      let resultArray = [];
      let count = 0;

      function processResult(index, status, value) {
        resultArray[index] = { status, value };
        count++;
        if (count === promises.length) {
          resolve(resultArray);
        }
      }

      for (let i = 0; i < promises.length; i++) {
        promises[i].then(
          value => processResult(i, 'fulfilled', value),
          reason => processResult(i, 'rejected', reason)
        );
      }
    });
  }

3.11、完整代码

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

    // resolve函数，用于将Promise状态从pending变为fulfilled，并记录成功的值
    const resolve = value => {
      // 只有在pending状态下才进行状态转变
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        // 执行所有成功回调函数
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    // reject函数，用于将Promise状态从pending变为rejected，并记录失败的原因
    const reject = reason => {
      // 只有在pending状态下才进行状态转变
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 执行所有失败回调函数
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    // 执行executor函数，并将resolve和reject函数作为参数传入
    try {
      executor(resolve, reject);
    } catch (err) {
      // 如果executor函数执行出错，直接调用reject函数
      reject(err);
    }
  }

  // then方法，用于为Promise实例添加处理成功和失败的回调函数
  then(onFulfilled, onRejected) {
    // 设置默认回调函数，确保函数类型，如果没有提供则使用默认处理函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason };

    // 创建新的Promise，用于链式调用
    let promise2 = new MyPromise((resolve, reject) => {
      // 如果状态为fulfilled，执行成功回调，如果状态为rejected，执行失败回调
      if (this.state === 'fulfilled' || this.state === 'rejected') {
        setTimeout(() => {
          try {
            // 获取成功回调的返回值
            let result = this.state === 'fulfilled' ? onFulfilled(this.value) : onRejected(this.reason);
            // 处理返回值以确定promise2的状态
            resolvePromise(promise2, result, resolve, reject);
          } catch (e) {
            // 如果执行成功回调过程中出错，直接reject
            reject(e);
          }
        }, 0);
      }

      // 如果状态为pending，将回调函数存储起来
      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              // 获取成功回调的返回值
              let result = onFulfilled(this.value);
              // 处理返回值以确定promise2的状态
              resolvePromise(promise2, result, resolve, reject);
            } catch (e) {
              // 如果执行成功回调过程中出错，直接reject
              reject(e);
            }
          }, 0);
        });

        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              // 获取失败回调的返回值
              let result = onRejected(this.reason);
              // 处理返回值以确定promise2的状态
              resolvePromise(promise2, result, resolve, reject);
            } catch (e) {
              // 如果执行失败回调过程中出错，直接reject
              reject(e);
            }
          }, 0);
        });
      }
    });

    // 返回新的Promise实例，实现链式调用
    return promise2;
  }

  // catch方法是then方法的一个快捷方式，用于处理Promise中的错误
  catch(onRejected) {
    // catch方法其实就是调用then方法，但只传入失败回调
    return this.then(null, onRejected);
  }

  // finally方法用于在Promise执行结束后，无论结果是成功还是失败，都会执行的回调函数
  finally(callback) {
    // finally方法接受一个回调函数，并在Promise结束时调用
    return this.then(
      value => {
        // 调用回调函数，并在它执行完毕后返回原值
        return MyPromise.resolve(callback()).then(() => value);
      },
      reason => {
        // 调用回调函数，并在它执行完毕后抛出原错误
        return MyPromise.resolve(callback()).then(() => { throw reason });
      }
    );
  }

  // resolve方法用于快速创建一个成功的Promise
  static resolve(value) {
    // 直接返回一个新的成功状态的Promise
    return new MyPromise((resolve, reject) => {
      resolve(value);
    });
  }

  // reject方法用于快速创建一个失败的Promise
  static reject(reason) {
    // 直接返回一个新的失败状态的Promise
    return new MyPromise((resolve, reject) => {
      reject(reason);
    });
  }

  // all方法用于将多个Promise实例包装成一个新的Promise实例，只有所有Promise实例都成功时，新Promise实例才会成功
  static all(promises) {
    // 返回一个新的Promise
    return new MyPromise((resolve, reject) => {
      // 存储所有Promise的结果
      let resultArray = [];
      // 记录已完成的Promise数量
      let count = 0;

      // 处理单个Promise的结果
      function processResult(index, data) {
        resultArray[index] = data;
        count++;
        // 如果所有Promise都完成，resolve新的Promise
        if (count === promises.length) {
          resolve(resultArray);
        }
      }

      // 遍历所有Promise，处理其结果
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(data => {
          processResult(i, data);
        }, reject);
      }
    });
  }

  // race方法用于将多个Promise实例包装成一个新的Promise实例，只要其中一个Promise实例率先完成，新Promise实例就会完成
  static race(promises) {
    // 返回一个新的Promise
    return new MyPromise((resolve, reject) => {
      // 遍历所有Promise，任意一个Promise完成就resolve/reject新的Promise
      for (let i = 0; i < promises.length; i++) {
        promises[i].then(resolve, reject);
      }
    });
  }

  // any方法，任意一个Promise成功则返回成功，所有Promise失败则返回失败
  static any(promises) {
    return new MyPromise((resolve, reject) => {
      let errors = [];
      let rejectedCount = 0;

      for (let i = 0; i < promises.length; i++) {
        promises[i].then(resolve, error => {
          errors[i] = error;
          rejectedCount++;
          if (rejectedCount === promises.length) {
            reject(new AggregateError(errors, 'All promises were rejected'));
          }
        });
      }
    });
  }
}

// resolvePromise方法用于处理then方法中返回的结果，以决定新的Promise的状态
function resolvePromise(promise2, x, resolve, reject) {
  // 如果promise2和x相等，抛出TypeError防止死循环
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }

  let called;
  // 如果x是对象或函数
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      // 取出x的then方法
      let then = x.then;
      // 如果then是函数，调用then，传入resolvePromise和reject函数
      if (typeof then === 'function') {
        // 将this指向x，并调用then()
        then.call(x, y => {
          if (called) return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          if (called) return;
          called = true;
          reject(err);
        });
      } else {
        // 如果then不是函数，以x为值fulfill promise2
        resolve(x);
      }
    } catch (err) {
      // 如果取then方法出错，直接reject
      if (called) return;
      called = true;
      reject(err);
    }
  } else {
    // 如果x不是对象或函数，以x为值fulfill promise2
    resolve(x);
  }
}

4、结语

通过手写Promise，我们深入了解了其内部工作原理。希望这篇技术文档对您理解Promise有所帮助。如果在实践中遇到问题，建议参考ES6标准中的Promise规范进行进一步学习。

空城皆是旧梦
关注
  • 15
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
手写Promise方法（直击Promise A+规范）
小王的技术库
02-22 805
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
手写Promise
XunLin233的博客
05-30 1942
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
面试官：手写一下 Promise 吧！ 我：What？？？
weixin_44995391的博客
05-23 648
面试官：手写一下 Promise 吧！ 我：What？？？
深入理解Promise之一步步教你手写Promise构造函数
zxdznyy的博客
01-27 2012
Promise是前端面试中笔记走重要的一个考点。如何真正的了解promise？我们不如自己动手，写一个可以拿来用的Promise.js。下面是循序递进的写法教学，本文的最后也有完整写法的代码可以借鉴，希望能够帮助大家！后面如果有机会会写一篇详解promise的博客，欢迎关注！
前端必须学会的经典面试题场景之一 —— 手写Promise
weixin_46709512的博客
06-06 2396
手写Promise的正确姿势~ 前端面试涨薪必学，从0实现Promise
【手写Promise】
热门推荐
weixin_49487698的博客
05-16 1万+
一、JS的错误 1、错误的类型 2、错误处理 3、错误对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
手写Promise可以帮助我们更好地理解其内部机制，加深对异步编程的理解。同时，这也是一个锻炼JavaScript面向对象编程技巧的好机会。通过不断实践和优化，我们可以构建出更强大、更符合实际需求的Promise实现。
ES6手写Promise
最新发布
08-08
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰,同时使用queueMicrotask 来排队执行，确保处理微任务逻辑的正确性
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
前端-JavaScrip-Promise-手写Promise
07-25
手写Promise源码 遵循Pormise/A+规范 适合学习Promise源码的同学
js代码-手写promise.all
07-16
下面我们将深入探讨如何手写一个`Promise.all`函数，以及其工作原理和应用场景。 首先，让我们看看`Promise.all`的基本用法。假设我们有以下两个Promise： ```javascript let promise1 = new Promise((resolve, ...
手写promise步骤详解（基础封装+链式调用）
一枚不断学习的小码农一枚~
03-06 1114
一、promise 封装 1.基础架构 function myPromise() { let self = this; // 此处 this 代指myPromise 这个函数 self.status = 'pending' // pending => resolve/reject let value = null // 成功时的参数 let reason = null // 失败时的参数 // 成功的回调 fun
手写promise，面试无敌
dear_mRZhou_的博客
06-24 1619
我们面试的时候经常会问到Promise的使用；有的面试官再深入一点，会继续问是否了解Promise的实现方式，或者有没有阅读过Promise的源码；今天我们就来看一下，Promise在内部是如何实现来链式调用的。 首先我们定义一个promise的构造函数 在这里插入代码片 ...
手写promise的两种实现方法
qq_37985836的博客
02-27 203
手写Promise实现的两种方法
Promise的用法&原理&手写实现
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
05-18 884
Promise用法、原理、手写实现
Promise学习笔记（尚硅谷）
Ch_ensf的博客
05-16 1288
一、Promise 的理解和使用 二、手写 Promise
手写简易版的promise
weixin_54217534的博客
06-28 813
Promise是一种抽象异步处理对象，Promise类的构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数如下代码，promise是一个类，所有我们可以用构造函数来进行实现，promise中可以传入一个参数，参数值为一个函数((resolve,reject) => {}),其参数值又可以传入两个参数,参数值为resolve和reject函数,则我们实现的pro
Promise学习-手写一个promise
水蓝针织
10-09 1594
学习了Promise的A+规范，以及手写一个Promise后，我对Promise学到的结果。 平常也有用到过promise来处理异步，先回顾下promise的用法 const myPromise = new Promise((resolve,reject) => { //写一些异步操作，比如ajax请求 if(window.onError){ reject('页面加载失败'); } setTimeout(() => { resolve('异步返回结果'); }, 1000)
promise的实现（如何手写一个promise）
yy168888的博客
04-03 235
如果你打算手动实现一个promise，你可能需要先问问自己，promise是什么？你平常最常见的promise是怎么样用的？ new Promise((resolve,reject)=>{ resolve(2) }).then(val=>{ console.log(val) }) 如果你了解事件循环，你就知道，promise里面的回调函数是在立即执行的，而then中的回调任务是会被推入异步微队列中等待执行的。 让我们先来捋捋这个Promise到底是个什么？ Promise是异步函数的一种
手写 Promise
09-01
当然可以！以下是一个简单的手写Promise的示例： ```javascript class Promise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onResolveCallbacks = []; this.onRejectCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onResolveCallbacks.forEach(callback => callback()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectCallbacks.forEach(callback => callback()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { const fulfilledHandler = typeof onFulfilled === 'function' ? onFulfilled : value => value; const rejectedHandler = typeof onRejected === 'function' ? onRejected : reason => { throw reason; }; const promise2 = new Promise((resolve, reject) => { const fulfillHandlerWrapper = () => { setTimeout(() => { try { const result = fulfilledHandler(this.value); resolvePromise(promise2, result, resolve, reject); } catch (error) { reject(error); } }, 0); }; const rejectHandlerWrapper = () => { setTimeout(() => { try { const result = rejectedHandler(this.reason); resolvePromise(promise2, result, resolve, reject); } catch (error) { reject(error); } }, 0); }; if (this.state === 'fulfilled') { fulfillHandlerWrapper(); } else if (this.state === 'rejected') { rejectHandlerWrapper(); } else { this.onResolveCallbacks.push(fulfillHandlerWrapper); this.onRejectCallbacks.push(rejectHandlerWrapper); } }); return promise2; } catch(onRejected) { return this.then(null, onRejected); } } function resolvePromise(promise, result, resolve, reject) { if (promise === result) { return reject(new TypeError('Chaining cycle detected for promise')); } let thenCalledOrThrow = false; if (result instanceof Promise) { result.then( value => resolvePromise(promise, value, resolve, reject), reason => reject(reason) ); } else if (result !== null && (typeof result === 'object' || typeof result === 'function')) { try { const then = result.then; if (typeof then === 'function') { then.call( result, value => { if (thenCalledOrThrow) return; thenCalledOrThrow = true; resolvePromise(promise, value, resolve, reject); }, reason => { if (thenCalledOrThrow) return; thenCalledOrThrow = true; reject(reason); } ); } else { resolve(result); } } catch (error) { if (thenCalledOrThrow) return; thenCalledOrThrow = true; reject(error); } } else { resolve(result); } } ``` 这只是一个基本的实现，还有很多细节和功能可以改进。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值