手写Promise-手把手教你从零实现一个自己的Promise

原创 于 2024-11-18 12:37:28 发布 · 507 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

1-什么是 Promise ？

在 JavaScript 中，Promise 是一种用于处理异步操作的对象，它可以更加优雅地处理回调函数嵌套和错误处理。

解决的问题：

// 1)回调写起来不好看(难以维护) 恶魔金字塔 嵌套逻辑不优雅 (链式调用 then)
// 2)错误处理无法统一  我们需要处理公共的错误逻辑 (catch)
// 3)尽量简化回调  多个异步并发问题 （Promise.all Promise.finllay）


// promise 依旧是基于回调的，可能还是会有嵌套问题

promise es6已经内部实现了， ie 不兼容 promise，需要 polyfill （比如：es-promise）

2-实现一个简单的promise

// 1) promise 是一个构造函数，默认需要传入一个executor执行器
// 2) executor 会立刻执行，并且传入 resolve 和 reject 两个参数
// 3) promise 有三个状态 fulfilled 成功  reject 拒绝态   pending等待态 (默认是等待态)
// 4)每个promise都有一个then方法 ， 可以访问到成功的值和失败的原因
// 5) 可以通过resolve和reject来改变状态，同时调用对应的回调， 一个promise实例状态变化后，不能再重新的发生变化
// 6) 或者当executor 发生异常的时候 也会触发promise的失败

代码实现：

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class Promise {
   
   
  constructor(executor) {
   
   
    this.state = PENDING; // new Promise 后 默认状态为pending
    this.value = undefined; //成功的原因
    this.reason = undefined; //失败的原因

    const resolve = (value) => {
   
   
      //只有状态是pending的时候 才可以修改状态
      if (this.state === PENDING) {
   
   
        this.state = FULFILLED;
        this.value = value;
      }
    };

    const reject = (reason) => {
   
   
      if (this.state === PENDING) {
   
   
        this.state = REJECTED;
        this.reason = reason;
      }
    };
    // 调用executor 会自动传入resolve 与 reject
    try {
   
   
      //或者当executor 发生异常的时候 也会触发promise的失败
      executor(resolve, reject);
    } catch (error) {
   
   
      reject(error);
    }
  }
  then(onFulfilled, onRejected) {
   
   
    if (this.state === FULFILLED) {
   
   
      onFulfilled(this.value);
    }

    if (this.state === REJECTED) {
   
   
      onRejected(this.reason);
    }
  }
}

module.exports = Promise;

//common.js 规范

使用自己的promise

// promise 干什么的，解决的问题是什么？

// 1)回调写起来不好看(难以维护) 恶魔金字塔 嵌套逻辑不优雅 (链式调用 then)
// 2)错误处理无法统一  我们需要处理公共的错误逻辑 (catch)
// 3)尽量简化回调  多个异步并发问题 （Promise.all Promise.finllay）

// promise 依旧是基于回调的，可能还是会有嵌套问题

// 1) promise 是一个构造函数，默认需要传入一个executor执行器
// 2) executor 会立刻执行，并且传入 resolve 和 reject 两个参数
// 3) promise 有三个状态 fulfilled 成功  rejected 拒绝态   pending等待态 (默认是等待态)
// 4)每个promise都有一个then方法 ， 可以访问到成功的值和失败的原因
// 5) 可以通过resolve和reject来改变状态，同时调用对应的回调，
//    一个promise实例状态变化后，不能再重新的发生变化
// 6) 或者当executor 发生异常的时候 也会触发promise的失败

const Promise = require("./promise.js");

const promise = new Promise((resolve, reject) => {
   
   
  console.log("executor");
  resolve("ok"); //resolve 与 reject 可以改变promise的状态
  reject("error");
});

promise.then(
  (data) => {
   
   
    console.log(data, "success");
  },
  (err) => {
   
   
    console.log(err, "reject");
  }
);

// console.log(promise);

但是上述代码有个问题：promise 调用 then 方法时可能当前的 promise 并没有成功，而是处于pending 状态。

例如：

const Promise = require("./promise.js");

const promise = new Promise((resolve, reject) => {
   
   
  console.log("executor");

  setTimeout(() => {
   
   
    // resolve("ok"); //resolve 与 reject 可以改变promise的状态
    reject("error");
  }, 1000);
});

promise.then(
  (data) => {
   
   
    console.log(data, "success1");
  },
  (err) => {
   
   
    console.log(err, "reject1");
  }
);

promise.then(
  (data) => {
   
   
    console.log(data, "success2");
  },
  (err) => {
   
   
    console.log(err, "reject2");
  }
);

// console.log(promise);

他并没有执行回调函数 ，但是这个问题很好解决 只要一个简单的发布订阅模式，如果当前状态是pending状态是，先将所有的回调函数储存起来，待等到相应状态依次调用储存的回调函数。 代码如下：

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class Promise {
   
   
  constructor(executor) {
   
   
    this.state = PENDING; // new Promise 后 默认状态为pending
    this.value = undefined; //成功的原因
    this.reason = undefined; //失败的原因

    // 发布订阅模式 
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    // promise调用then的时候 可能状态依旧是pending，那么我们需要将回调先存放起来
    // 等待过一会调用resolve时触发 onResolvedCallbacks 执行
    // 等待调用 reject时触发 onRejectedCallbacks 执行

    const resolve = (value) => {
   
   
      //只有状态是pending的时候 才可以修改状态
      if (this.state === PENDING) {
   
   
        this.state = FULFILLED;
        this.value = value;
        this.onResolvedCallbacks.forEach((cb) => cb());
      }
    };

    const reject = (reason) => {
   
   
      if (this.state === PENDING) {
   
   
        this.state = REJECTED;
        this.reason = reason; //先赋值 后执行 
        this.onRejectedCallbacks.forEach((cb) => cb());
      }
    };
    // 调用executor 会自动传入resolve 与 reject
    try {
   
   
      //或者当executor 发生异常的时候 也会触发promise的失败
      executor(resolve, reject);
    } catch (error) {
   
   
      reject(error);
    }
  }
  then(onFulfilled, onRejected) {
   
   
    if (this.state === FULFILLED) {
   
   
      onFulfilled(this.value);
    }

    if (this.state === REJECTED) {
   
   
      onRejected(this.reason);
    }

    if (this.state === PENDING) {
   
   
      this.onResolvedCallbacks.push(() => {
   
   
        onFulfilled(this.value);
      });
      this.onRejectedCallbacks.push(() => {
   
   
        onRejected(this.reason);
      });
    }
  }
}

module.exports = Promise;

此时结果：

3-实现promise的链式调用

链式调用可以解决地狱回调问题：

  1. promise 成功和失败的回调的返回值可以传递到外层的下一个 then
  2. promise 返回值情况
  • 如果返回的是 promise 的情况：会采用 promise 的状态，决定下一步是走成功还是失败
  • 如果返回的是普通的值的话：传递到下一次的成功中（不是抛出错误（throw new Error）也不是 promise 就是普通值）
  • 如果返回的是抛出错误的情况：一定会走到下一次的失败中
  1. 错误处理：如果离自己最近的 then 没有错误处理（没有写错误函数）会向下找
  2. 每次执行完 <font style="color:rgb(199, 37, 78);background-color:rgb(249, 242, 244);">promise.then</font> 方法后返回的都是一个新的 promise （promise 一旦成功或者失败都不能去修改状态）
// (1) then链的特点：当then中成功和失败的回调 返回的是一个promise, 内部会解析这个promise， 并将结果传递到外层的下一个then
// (2) 下一次then走成功还是失败, 取决于当前promise的状态
// (3) 如果成功和失败返回的不是一个promise， 那么这个结果直接传递到下一个成功
// (4) 如果成功和失败返回的抛出异常了， 那么这个异常会直接传递到下一个失败
// (5) 让一个promise(then) 变成失败有两种方式, 一种是直接抛出异常， 一种是返回一个失败的promise
readFile(path.resolve(__dirname, "a.txt"), "utf-8")
  .then((data) => {
   
   
    return readFile(data, "utf-8"); // 返回的是一个promise
  })
  .then(
    (data) => {
   
   
      console.log(data, "success");
    },
    (err) => {
   
   
      console.log(err, "error");
      return true;
    }
  )
  .then((data) => {
   
   
    console.log(data, "success2");
    throw new Error("error");
  })
  .then((data)=>{
   
   },(err)=>{
   
   
    console.log(err, "error2");
  })

分别对应返回值的三种情况：

下面来实现一下promise的链式调用：

3-1 实现链式调用里普通值处理

如果返回的是普通的值的话：传递到下一次的成功中（不是错误也不是 promise 就是普通值）resolvePromise函数会做这个处理 后续会写到 先了解一下这个流程。

3-2 实现链式调用里返回的是Promise处理

具体可以参考这个：https://promisesaplus.com/

下面是这两种情况的代码实现：resolvePromise函数统一处理这两种情况，第三种情况是返回的是抛出错误的情况：一定会走到下一次的失败中 （直接有trycatch捕获到error后直接调用reject（e）即可）

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

// 为了让所有人promise 可以互相调用 所有的promise都需要这个规则
function resolvePromise(promise2, x, resolve, reject) {
   
   
  console.log(promise2,x);
}

class Promise {
   
   
  constructor(executor) {
   
   
    this.state = PENDING; // new Promise 后 默认状态为pending
    this.value = undefined; //成功的原因
    this.reason = undefined; //失败的原因

    // 发布订阅模式
    // 存放成功回调
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = []; // 存放失败回调
    // promise调用then的时候 可能状态依旧是pending，那么我们需要将回调先存放起来
    // 等待过一会调用resolve时触发 onResolvedCallbacks 执行
    // 等待调用 reject时触发 onRejectedCallbacks 执行

    const resolve = (value) => {
   
   
      //只有状态是pending的时候 才可以修改状态
      if (this.state === PENDING) {
   
   
        this.state = FULFILLED;
        this.value = value;
        this.onResolvedCallbacks.forEach((cb) => cb());
      }
    };

    const reject = (reason) => {
   
   
      if (this.state === PENDING) {
   
   
        this.state = REJECTED;
        this.reason = reason; //先赋值 后执行
        this.onRejectedCallbacks.forEach((cb) => cb());
      }
    };
    // 调用executor 会自动传入resolve 与 reject
    try {
   
   
      //或者当executor 发生异常的时候 也会触发promise的失败
      executor(resolve, reject);
    } catch (e) {
   
   
      reject(e);
    }
  }

  // promise 必须提供 then 方法来存取它当前或最终的值或者原因。
  // then 接收两个参数：onFulfilled 和 onRejected
  then(onFulfilled, onRejected) {
   
   
    //new Promise promise会立即执行
    let promise2 = new Promise((resolve, reject) => {
   
   
      if (this.state === FULFILLED) {
   
   
        setTimeout(() => {
   
     // 此时promise2还没有定义 不能将其传进去 所以抱一个setTimeout方法
          try {
   
   
            let x = onFulfilled(this.value); // promise返回的是一个普通值的话 传递到下一个promise中
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
   
   
            //如果返回的是错误的情况：一定会走到下一次的失败中
            reject(e);
          }
        });
      }

      if (this.state === REJECTED) {
   
   
        setTimeout(() => {
   
   
          try {
   
   
            let x = onRejected(this.reason); // promise返回的是一个普通值的话 传递到下一个promise中
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
   
   
            reject(e);
          }
        });
      }

      if (this.state === PENDING) {
   
   
        this.onResolvedCallbacks.push(() => {
   
   
          setTimeout(() => {
   
   
            try {
   
   
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
   
   
              reject(e);
            }
          });
        });
        this.onRejectedCal
最低0.47元/天 解锁文章
前端杂谈: 如何实现一个 Promise?
weixin_34272308的博客
12-13 237
首先, 什么是 Promise? A promise is an object that may produce a single value some time in the future: either a resolved value, or a reason that it’s not resolved (e.g., a network error occurred). A promis...
手写Promise
weixin_42324665的博客
01-27 141
class Promise { //构造函数 constructor(executor) { //添加属性 this.PromiseState = 'pending'; this.PromiseResult = null; //声明属性 this.callbacks = []; //保存实例对象this的值 const _this = this //resolve
Promise原理及实现
橘猫吃不胖的博客
08-09 3008
Promise原理及实现 1 Promise核心逻辑实现 2 加入异步逻辑 3 then方法添加多次调用逻辑 4 链式调用then方法 5 Promise错误捕获 6 then方法参数设置为可选 7 实现Promise.all 8 实现Promise.resolve 9 实现Promise.race 10 实现finally方法 11 实现catch方法 12 全部代码展示...
如何实现一个 Promise
LuckXinXin的博客
08-01 204
// 三种状态 const PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "rejected"; // promise 接收一个函数参数，该函数会立即执行 function MyPromise(fn) { let _this = this; _this.currentState = PENDING; _this.value = undefined; // 用于保存 then 中的回调，只有当 promis
Promise进阶——如何实现一个Promise库
weixin_34379433的博客
01-02 314
概述 从上次更新Promise/A+规范后，已经很久没有更新博客了。之前由于业务需要，完成了一个TypeScript语言的Promise库。这次我们来和大家一步一步介绍下，我们如何实现一个符合Promise/A+规范的Promise库。 如果对Promise/A+规范还不太了解的同学，建议先看看上一篇博客—— [译]前端基础知识储备——Promise/A+规范 。 实现流程 首先，我们来看下，在我...
手把手教你手写Promise代码
手写Promise是JS学习中的一个高级话题，它可以帮助我们更加深入理解Promise的工作机制。下面，我将详细介绍Promise的内部实现原理以及如何手写一个简单的Promise。 首先，Promise构造函数接收一个执行器（executor...
手把手教你实现自定义Promise对象
实际上，手写Promise是一个比较复杂的任务，因为它涉及到很多JavaScript的异步处理机制和事件循环的概念，需要读者有一定的JavaScript编程基础。 代码文件概述： - main.js：在该文件中，将包含实现mypromise类和...
手把手教你实现JavaScript中的Promise
具体地，资源中包含一个JavaScript文件main.js，该文件包含了手写Promise实现的代码，以及一个README.txt文件，提供有关该练习的背景信息和实现指南。" 知识点详细说明： 1. Promise概念和用途 Promise是...
手把手教你编写自定义Promise实现
资源摘要信息:"手写一个mypromise的JS代码实现，涉及Promise的原理及实践，包含源代码文件main.js和说明文档README.txt" 知识点: 1. Promise基础 在JavaScript中，Promise是异步编程的一种解决方案，它代表了未来...
Promise的实现
qq_39039128的博客
05-13 446
const PENDING = 'pending' const FULFILLED = 'fulfilled' const REJECTED = 'rejected' function Promise(executor){ let self = this self.state = PENDING self.value = null self.reason = null self.onFulfilledCallbacks = [] self.onReject.
手把手教你实现一个promise
qq_36836989的博客
12-03 636
文章目录前言先看一段代码进入主题thenthen的链式调用catch 前言 网上看了很多关于promise的源码讲解，都是上来直接讲的源码实现，本文将带你通过分析promise的使用方法来了解promise的具体实现 先看一段代码 const p = new Promise((resolve, reject) => { resolve('resolve') setTimeout(() => { reject('reject') }) }) p.then(res =>
简单实现一个Promise
roamingcode的博客
08-23 566
Promise 实现
如何实现一个简单的promise
jianjieX的博客
07-07 310
一个简单的 Promise 的粗糙实现，关键点在于 当 pending 时， thenable 函数由一个队列维护 当状态变为 resolved(fulfilled) 时，队列中所有 thenable 函数执行 当 resolved 时， thenable 函数直接执行 rejected 状态同理 class Prom { static resolve (value) { if (value && value.then) { return value }
简单实现一个promise
qq_40115279的博客
11-11 2200
我们先分析一下promise 都有哪些功能： 1、promise 是一个类，所以 我们可以使用class关键字声明 2、promise 有三种状态 pending （等待执行） fulfilled （执行成功） rejected （执行失败） - 状态只能有两种转换方式： · pending --> fulfilled · pending --> rejected - 只要状态发生了改变，这一次promise就算执行完成了。 - 不管结果是成功还是失败，都不会再变成另一种。 3.
promise简单实现
weixin_42619992的博客
04-21 2045
1、最简单的实现 promise有三种状态，分别是Pedding、Fulfilled、Rejected。 Pedding promise对象实例创建时的初始状态 Fulfilled可以理解为成功的状态 Rejected可以理解为失败的状态 2、构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject 3、Promise上还有then方法，then方法就是用来指定Promise对象的状态
超详细！手把手带你实现一个完整的Promise
Coding home - 漂流瓶jz
10-04 1705
本文首先介绍了JavaScript中异步编程的几种方式，再对Promise进行了简单介绍。然后从创建类开始，一步一步实现一个完整的Promise。我们实现的Promise不仅可以通过Promises/A+规范测试，并且提供了与ECMAScript同样的实用函数。
如何实现一个 promise
primedream_RYH的博客
05-23 293
实现一个简单得promise /** * @resolveCallbackAall 存放所有成功回调 * @rejectCallbackAall 存放所有失败回调 */ let promise = function (promiseCallback) { let resolveC...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值