手写promise等

已于 2024-12-02 17:29:50 修改
阅读量788 收藏 18
点赞数 11
分类专栏： 充电区 文章标签： 前端 java javascript
于 2024-11-25 18:28:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ParkChanyelo/article/details/144028621
版权

一、前提了解

关于promise：

首先，我们都知道它有三个状态，可以进行异步操作，并且有错误的处理机制。除此之外，它是可以链式调用的。常用的几个方法：then、catch、finally，以及all、race、resolve、reject等方法。

接着简单地了解一下它产生的背景。

众所周知，JavaScript是单线程的，因此必须支持异步编程才能提高运行效率。异步编程的语法目标是让异步过程写起来像同步过程。

回调函数是最简单的一种方式，但是其容易形成回调地狱，即多个回调函数嵌套，降低代码可读性，容易出错。

于是ES6中出现了Promise，它有三种状态，pending、fulfilled、rejected，并且可以链式调用。Promise实际上是利用编程技巧将回调函数的横向加载，改成纵向加载，达到链式调用的效果，避免回调地狱。最大问题是代码冗余，原来的任务被Promise包装了一下，会有很多then，catch。当然这样也会导致代码的复杂性，所以后面又出现了async、await（ES8中被提出来）。

这是其产生的背景和作用，那么接着说我们知道的，promise的构成：

1、三个状态：pending、fulfilled、rejected

2、构造函数：执行器函数executor

3、then、catch、finally、resolve、reject、race、all、allSettle等方法，一般了解前三个就好

二、开始实现

先实现简单的，三个状态的变化，以及基本的then方法。
已知三个状态：

  1. Pending（待定）：初始状态，操作尚未完成。
  2. Fulfilled（已兑现）：操作成功完成，并返回一个值。
  3. Rejected（已拒绝）：操作失败，并返回一个原因。

Promise 的状态一旦从 Pending 转为 Fulfilled 或 Rejected，就不可更改。

因为promise需要异步执行，所以用 queueMicrotask 或者 setTimeout 模拟微任务，主要是为了确保异步回调不会阻塞当前同步代码的执行。而且这里涉及一个知识，Promise.resolve().then是微任务，尽管setTimeout是宏任务，但也能够满足异步需求。

具体代码：

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

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach((cb) => cb()); // 执行所有成功回调
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach((cb) => cb()); // 执行所有失败回调
      }
    };

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

  then(onFulfilled, onRejected) {
    // 如果未传回调函数，给默认的透传函数
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
    onRejected = typeof onRejected === 'function' ? onRejected : (reason) => { throw reason; };

    const promise2 = new MyPromise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        // 保证异步执行
        queueMicrotask(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === 'rejected') {
        queueMicrotask(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (err) {
            reject(err);
          }
        });
      }

      if (this.state === 'pending') {
        this.onFulfilledCallbacks.push(() => {
          queueMicrotask(() => {
            try {
              const x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (err) {
              reject(err);
            }
          });
        });

        this.onRejectedCallbacks.push(() => {
          queueMicrotask(() => {
            try {
              const x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (err) {
              reject(err);
            }
          });
        });
      }
    });

    return promise2;
  }

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

  finally(callback) {
    return this.then(
      (value) => MyPromise.resolve(callback()).then(() => value),
      (reason) => MyPromise.resolve(callback()).then(() => { throw reason; })
    );
  }

  // 静态 resolve 方法
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }
    return new MyPromise((resolve) => resolve(value));
  }

  // 静态 reject 方法
  static reject(reason) {
    return new MyPromise((_, reject) => reject(reason));
  }
}

// 帮助处理 then 返回值
function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('Chaining cycle detected for promise'));
  }

  if (x && (typeof x === 'object' || typeof x === 'function')) {
    let called = false;
    try {
      const then = x.then;
      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 {
        resolve(x);
      }
    } catch (err) {
      if (called) return;
      called = true;
      reject(err);
    }
  } else {
    resolve(x);
  }
}

module.exports = MyPromise;

测试：

// 测试
const promise = new MyPromise((resolve) => {
  setTimeout(() => resolve('Success!'), 1000);
});

promise
  .then((value) => {
    console.log('First:', value);
    return 'Next Step';
  })
  .then((value) => {
    console.log('Second:', value);
    return new MyPromise((resolve) => {
      setTimeout(() => resolve('Final Step'), 1000);
    });
  })
  .then((value) => console.log('Third:', value));

三、关于then的处理更简单的写法

then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      const handleFulfilled = () => {
        try {
          const result = typeof onFulfilled === 'function' ? onFulfilled(this.value) : this.value;
          resolve(result);
        } catch (error) {
          reject(error);
        }
      };

      const handleRejected = () => {
        try {
          const result = typeof onRejected === 'function' ? onRejected(this.reason) : this.reason;
          resolve(result);
        } catch (error) {
          reject(error);
        }
      };

      if (this.state === 'fulfilled') {
        setTimeout(handleFulfilled, 0);
      } else if (this.state === 'rejected') {
        setTimeout(handleRejected, 0);
      } else {
        this.fulfillQueue.push(() => setTimeout(handleFulfilled, 0));
        this.rejectQueue.push(() => setTimeout(handleRejected, 0));
      }
    });
  }

四、finally：

finally(callback) {
    return this.then(
      (value) => MyPromise.resolve(callback()).then(() => value),
      (reason) => MyPromise.resolve(callback()).then(() => { throw reason; })
    );
  }

五、all

我们都知道，Promise.all的主要功能是接收一个可迭代对象（通常是数组），其中包含多个Promise或非 Promise值，返回一个新的Promise，然后其运行逻辑就是：

  • 如果所有 Promise 都成功，新的 Promise 会被 resolve，返回值是一个包含所有结果的数组。
  • 如果其中任意一个 Promise 被 reject，新的 Promise 会立即被 reject，返回原因。

然后处理过程需要对传入的值是否是数组，是否是promise等进行判断，然后统计fulfillCount ：

Promise.all = function (iterable) {
  // 将传入的可迭代对象转化为数组
  var tasks = Array.from(iterable);

  // 如果任务数组为空，直接返回一个 resolve 的 Promise，值为空数组
  if (tasks.length === 0) {
    return Promise.resolve([]);
  }

  // 如果所有任务都不是 Promise，则直接返回 resolve 的 Promise
  if (tasks.every(task => !(task instanceof Promise))) {
    return Promise.resolve(tasks);
  }

  // 返回一个新的 Promise，用于处理多个任务
  return new Promise((resolve, reject) => {
    var values = new Array(tasks.length).fill(null); // 用于存储任务结果的数组
    var fulfillCount = 0; // 用于统计已完成任务的数量

    // 遍历任务数组
    tasks.forEach((task, index, arr) => {
      if (task instanceof Promise) {
        // 如果任务是一个 Promise，处理其结果
        task.then(value => {
          fulfillCount++; // 成功的任务计数+1
          values[index] = value; // 将结果存储在正确的索引位置

          // 如果所有任务都完成，resolve 最终的结果数组
          if (fulfillCount === arr.length) {
            resolve(values);
          }
        }, reason => {
          // 如果任意任务失败，直接 reject
          reject(reason);
        });
      } else {
        // 如果任务不是 Promise，直接存储结果
        fulfillCount++;
        values[index] = task;
      }
    });
  });
};

最后再补充

这里有一个基于Promises/A+ 标准实现的例子，很规范，核心思想一致：GitHub - cumt-robin/promises-aplus-robin: a lightweight Promises/A+ implementation that is able to detect circular thenable chain.

主要了解核心，还有finally方法就差不多了。

ES6手写Promise
ruan479118658的博客
08-08 357
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰
js代码-手写promise.all
07-16
// 这里将实现手写Promise.all的逻辑 }); } ``` 接下来，我们需要跟踪Promise的状态。我们可以创建一个计数器来记录已解析的Promise数量，以及一个存储结果的数组： ```javascript let resolvedCount = 0; let ...
【JavaScript】手写Promise
编码世界
05-15 5018
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
手写Promise
weixin_42782004的博客
05-11 986
若要使缺乏完整 promise 实现的浏览器符合规范，或将 promise 添加到其他浏览器和 Node.js 中，请查看。​ 上面提到的库,以及ES6中实现的Promise,还有我们手写的Promise其实都是按照标准进行编写的,那么如何测试是否符合标准呢。无论是早期实现了Promise的第三方库,以及现在的新式浏览器内置的Promise,都是符合。手写Promise-链式编程-fulfilled状态-返回Promise。是社区推出的规范,最早Promise也是社区推出并实现的,旨在规范。
手写Promise.all
qq_70172010的博客
05-06 265
接收一个可迭代对象（通常是数组）作为参数，该数组中的每个元素都是一个 Promise 对象，当所有 Promise 都成功完成时，它会返回一个新的 Promise，该 Promise 会在所有 Promise 都成功时以一个包含所有结果的数组来解析；函数，它接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。在函数内部，通过遍历传入的 Promise 数组，为每个 Promise 绑定。当所有 Promise 都成功完成时，将每个 Promise 的结果存储在。
手写Promise源码
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
08-17 308
纯手写Promise源码，如有遗漏场景或漏洞，请评论区指出，不胜感激！
手写promise.any
weixin_51676646的博客
05-02 312
手写Promise.any
手写 Promise 的实现
DHLSP15的博客
03-10 423
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.all
weixin_54217534的博客
06-26 2862
1.promise的基本概念Promise是一种抽象异步处理对象，Promise类的构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数2.promise.all的用法promise.all(promises)，promises参数是一个数组，数组内的元素都是promise对象，当里面的每一个promise对象都返回成功resolve的回调函数，它则返回包含数组
Promise_js手写promise_js手写Promise_手写Promise_JS手写Promise_
09-30
在本文中，我们将深入探讨如何使用原生JavaScript手写Promise。 首先，我们需要理解Promise的基本概念。Promise有三种状态：pending（等待中）、fulfilled（已完成）和rejected（已拒绝）。每个Promise实例在其生命...
JS手写Promise源码
12-19
4、更好地使用第三方Promise库：手写Promise可以帮助我们更好地使用和理解第三方的Promise库，如Bluebird或q.js等。通过手动实现Promise，我们可以更好地理解这些库是如何实现Promise的，并更好地使用它
【Web应用】若依框架：基础篇13 源码阅读-前端代码分析
最新发布
成为你自己，做你想做的
06-03 167
【Web应用】若依框架：基础篇13 源码阅读-前端代码分析
国芯思辰| 国产四通道24位生理电采集模拟前端AFE全面替换ADS1294R，心电贴性能再飞跃
weixin_38427020的博客
05-29 820
国芯思辰，国产芯片替代
【Elasticsearch】search_after不支持随机到哪一页，只能用于上一页或下一页的场景
risc123456的博客
06-03 372
如果需要跳转到任意一页，`search_after` 无法直接实现，因为它无法像 `from` 和 `size` 那样通过偏移量直接定位到目标页。`search_after` 确实不支持随机访问（即直接跳到任意一页），因此在前端需要随机跳转到某一页的场景中，使用 `search_after` 是不合适的。根据你的描述，如果前端允许用户随意点击某一页，那么确实不适合使用 `search_after`，而应该使用 `from` 和 `size` 来实现分页功能。- 不支持随机访问，用户不能直接跳转到任意一页。
el-table-column如何获取行数据的值
LoveYouQueena的博客
05-29 780
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
网易 - 灵犀办公文档
葡萄城技术团队博客
05-30 544
网易 - 灵犀办公文档
前端面试题目-高频问题集合
huidoo888的博客
05-30 841
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则用户体验不好，首屏时需要请求一次html，同时还要发送一次js请求，两次请求回来了，首屏才会展示出来。在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）。栈在函数调用时，函数调用语句的下一条可执行语句的地址第一个进栈，然后函数的各个参数进栈，其中静态变量是不入栈的。
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值