手写简易promise

最新推荐文章于 2024-05-02 18:12:22 发布
最新推荐文章于 2024-05-02 18:12:22 发布
阅读量55 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38342645/article/details/130944165
版权

Promise 的能力

解决了回调地狱

  • 嵌套调用，第一个函数的返回值是第二个函数的入参（then 的链式调用）
  • 处理多个并发异步请求（Promise.all）

手写 Promise

Promise 的核心

  1. 有三个状态 pending、resolved、rejected，一旦改变，不可逆转
  2. Promise 构造函数接受一个 excutor 函数，立即执行
  3. excutor 有两个函数，resolve，reject
  4. then 函数接收两个函数，onResolve，onReject，excutor 调用 resolve。then 实现 onResolve，excutor 调用 reject，then 实现 onReject
  5. then 的链式调用和值的穿透

_Promise 1.0

const p1 = new _Promise((resolve, reject) => {
  resolve("success");
  reject("failed");
}).then(
  (data) => {
    console.log(data);
  },
  (err) => {
    console.log(err);
  }
);

首先我们希望这个最简单的代码能跑起来，根据上述的核心，先搭一个大概的架子

class _Promise {
  constructor(executor) {
    this.status = "pending";
    this.value = undefined;
    this.reason = undefined;
    let resolve = () => {};
    let reject = () => {};
    executor(resolve, reject);
  }

  then(onResolve, onReject) {}
}

调用 resolve 和 reject 的时候，状态要改变，并且把值保存起来

class _Promise {
  constructor(executor) {
    this.status = "pending";
    this.value = undefined;
    this.reason = undefined;
    let resolve = (value) => {
      if (this.status === "pending") {
        this.value = value;
        this.status = "resolved";
      }
    };
    let reject = (reason) => {
      if (this.status === "pending") {
        this.reason = reason;
        this.status = "rejected";
      }
    };
    executor(resolve, reject);
  }

  then(onResolve, onReject) {}
}

then 函数会接受两个方法 resolve 就执行第一个，reject 就执行第二个

class _Promise {
  constructor(executor) {
    // ...
  }

  then(onResolve, onReject) {
    if (this.status === "resolved") {
      onResolve(this.value);
    }
    if (this.status === "rejected") {
      onReject(this.reason);
    }
  }
}

执行一下代码，确实是我们需要的，而且 resolve 执行过后，再调用 reject 也不起作用了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TsEQnXSL-1685415934107)(/assets/promise/1.png)]

_Promise 2.0

接下来，我们在 excutor 中传入一个异步操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHVuffXk-1685415934108)(/assets/promise/2.png)]

发现，如上图所示，并没有任何的输出，这是因为代码运行到 then 方法的时候，resolve 没有调用，所以 status 还是 pending 状态的，所以没有输出。因此我们需要把回调函数存起来，当 resolve 或 reject 调用的时候，再执行

class _Promise {
  constructor(executor) {
    this.status = "pending"; // 状态
    this.value = undefined; // resolve的值
    this.reason = undefined; // reject的值
    this.onResolveCbs = []; // onResolve 回调
    this.onRejectCbs = []; // onReject 回调
    let resolve = (value) => {
      // 状态改变之后不可逆
      if (this.status === "pending") {
        this.value = value;
        this.status = "resolved";
        this.onResolveCbs.forEach((cb) => cb());
      }
    };
    let reject = (reason) => {
      // 状态改变之后不可逆
      if (this.status === "pending") {
        this.reason = reason;
        this.status = "rejected";
        this.onRejectCbs.forEach((cb) => cb());
      }
    };
    executor(resolve, reject);
  }

  then(onResolve, onReject) {
    if (this.status === "resolved") {
      onResolve(this.value);
    }
    if (this.status === "rejected") {
      onReject(this.reason);
    }

    if (this.status === "pending") {
      this.onResolveCbs.push(() => {
        onResolve(this.value);
      });
      this.onRejectCbs.push(() => {
        onReject(this.reason);
      });
    }
  }
}

执行一下，我们可以看到异步成功的执行了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bz8Afp9p-1685415934109)(/assets/promise/3.png)]

_Promise 3.0

前面的都是基础，接下来的 then 的链式和值的穿透才是重点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-foWiz75E-1685415934109)(/assets/promise/4.png)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oJiq1f3F-1685415934110)(/assets/promise/5.png)]

then 返回的是一个新的 Promise 对象
return 的值新 Promise 的 resolve 的参数

then(onResolve, onReject) {
  // if (this.status === "resolved") {
  //   onResolve(this.value);
  // }
  // if (this.status === "rejected") {
  //   onReject(this.reason);
  // }

  // if (this.status === "pending") {
  //   this.onResolveCbs.push(() => {
  //     onResolve(this.value);
  //   });
  //   this.onRejectCbs.push(() => {
  //     onReject(this.reason);
  //   });
  // }
  const newpromise = new _Promise((resolve, reject) => {})

  return newpromise
}

原来的逻辑还是要存在的，但是新的 promise 的 resolve 函数的参数，需要获得现在这一个 then 函数的返回值

then(onResolve, onReject) {
  let x;
  const newpromise = new _Promise((resolve, reject) => {
    if (this.status === "resolved") {
      x = onResolve(this.value);
      resolve(x);
    }
    if (this.status === "rejected") {
      x = onReject(this.reason);
      resolve(x);
    }

    if (this.status === "pending") {
      this.onResolveCbs.push(() => {
        x = onResolve(this.value);
        resolve(x);
      });
      this.onRejectCbs.push(() => {
        x = onReject(this.reason);
        resolve(x);
      });
    }
  });

  return newpromise;
}

执行之后的结果是正确的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ipkPcFjV-1685415934110)(/assets/promise/6.png)]

但是，去掉 excutor 中的 settimeout 函数之后，结果和正统的 Promise 结果(1->2->success->11->22)不一样

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CN1fnnKs-1685415934111)(/assets/promise/7.png)]

这是因为正统的 Promise 中的 then 是异步的

所以我们的 onResolve，onReject 也要是异步的，这就需要我们在外层加上异步函数

  then(onResolve, onReject) {
    let x;
    const newpromise = new _Promise((resolve, reject) => {
      if (this.status === "resolved") {
        setTimeout(() => {
          x = onResolve(this.value);
          resolve(x);
        });
      }
      if (this.status === "rejected") {
        setTimeout(() => {
          x = onReject(this.reason);
          resolve(x);
        });
      }

      if (this.status === "pending") {
        this.onResolveCbs.push(() => {
          setTimeout(() => {
            x = onResolve(this.value);
            resolve(x);
          });
        });
        this.onRejectCbs.push(() => {
          setTimeout(() => {
            x = onReject(this.reason);
            resolve(x);
          });
        });
      }
    });

    return newpromise;
  }

这是链式调用，接下来还有值的穿透，要是用现在的代码去跑代码.then().then()一定会报错，因为你的 then 方法根本什么参数都没有传，所以需要在 then 函数刚开始的时候进行判断，如果不是一个函数，那就直接设置 onResolve 为(v) => v方法，这样后面调用的时候直接返回的就是 value 值，onReject 也是一样的

then(onResolve, onReject) {
  if (typeof onResolve !== "function") onResolve = (v) => v;
  if (typeof onReject !== "function") onReject = (v) => v;
  let x;
  const newpromise = new _Promise((resolve, reject) => {
    if (this.status === "resolved") {
      setTimeout(() => {
        x = onResolve(this.value);
        resolve(x);
      });
    }
    if (this.status === "rejected") {
      setTimeout(() => {
        x = onReject(this.reason);
        resolve(x);
      });
    }

    if (this.status === "pending") {
      this.onResolveCbs.push(() => {
        setTimeout(() => {
          x = onResolve(this.value);
          resolve(x);
        });
      });
      this.onRejectCbs.push(() => {
        setTimeout(() => {
          x = onReject(this.reason);
          resolve(x);
        });
      });
    }
  });

  return newpromise;
}

执行看一下结果，确实实现了值的穿透
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YPWWOKB5-1685415934111)(/assets/promise/8.png)]

至此，我们就大致实现了一个建议的 Promise，之后的就是处理一些特殊情况、实现一些 promise 的 api 和进行公共方法的封装

_Promise 4.0

then 函数的返回值有这几类

  1. 如果不是对象也不是函数，那就直接 resolve
  2. 如果是一个对象或者一个函数，但是不含有 then 函数，说明不是 promise 对象，直接 resolve
  3. 如果是一个对象或者一个函数，但是含有 then 函数，说明是一个 promise 对象，需要实现这个 promise 然后 then 的返回值来

所以我们需要封装一个 resolvePromise 函数

resolvePromise(x, resolve, reject) {
  resolve(x)
}

then(onResolve, onReject) {
  if (typeof onResolve !== "function") onResolve = (v) => v;
  if (typeof onReject !== "function") onReject = (v) => v;
  let x;
  const newpromise = new _Promise((resolve, reject) => {
    if (this.status === "resolved") {
      setTimeout(() => {
        x = onResolve(this.value);
        this.resolvePromise(x, resolve, reject);
      });
    }
    if (this.status === "rejected") {
      setTimeout(() => {
        x = onReject(this.reason);
        this.resolvePromise(x, resolve, reject);
      });
    }

    if (this.status === "pending") {
      this.onResolveCbs.push(() => {
        setTimeout(() => {
          x = onResolve(this.value);
          this.resolvePromise(x, resolve, reject);
        });
      });
      this.onRejectCbs.push(() => {
        setTimeout(() => {
          x = onReject(this.reason);
          this.resolvePromise(x, resolve, reject);
        });
      });
    }
  });

  return newpromise;
}

resolvePromise 函数需要满足之前说的三个条件

  resolvePromise(x, resolve, reject) {
    const xType = typeof x;
    if (xType !== "object" && xType !== "function") {
      resolve(x);
      return;
    }
    const then = x.then;

    if (typeof then === "function") {
      then.call(
        x,
        (data) => {
          this.resolvePromise(data, resolve, reject);
        },
        (reason) => {
          reject(reason);
        }
      );
    } else {
      resolve(x);
    }
  }

最后添加一个 promise.all 方法

  static all(promises) {
    return new _Promise((resolve, reject) => {
      let count = 0;
      let arr = [];
      promises.forEach((promise, index) => {
        promise.then(
          (res) => {
            count++;
            arr[index] = res;
            if (count >= promises.length) resolve(arr);
          },
          (err) => {
            reject(err);
          }
        );
      });
    });
  }
darkeering
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
手写Promise.js
11-13
Promise的手写代码，请配合博客《JavaScprit》异步编程（三）深入浅出Promise使用
手写一个简易 promise
倔强的钢蛋
03-16 52
微风不燥，手写一个简易promise 正好
手写简易Promise
weixin_34101784的博客
04-10 123
前言 首先，我是一名大四前端小白，如果以下内容有错误或值得改进的地方，还请各位大佬多多指点哈（疯狂吐槽） Promise相信大家肯定相当熟悉，但对于像我刚入门的小白来说，想完全理解Promise的内部原理还是挺困难的。 Promise 对象拥有很强大的功能，它允许你为异步操作的成功和失败分别绑定相应的处理方法。 这让异步操作可以像同步操作一样返回值，但并不是立即返回最终执行结果，而是一个能代表未...
手写简易版的promise
weixin_54217534的博客
06-28 791
Promise是一种抽象异步处理对象，Promise类的构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数如下代码，promise是一个类，所有我们可以用构造函数来进行实现，promise中可以传入一个参数，参数值为一个函数((resolve,reject) => {}),其参数值又可以传入两个参数,参数值为resolve和reject函数,则我们实现的pro
一起来手写简易版promise
qq_43352105的博客
07-29 471
相信大家学了promise后，面试都会遇到手写promise的现象，我也尝试了通过自己的理解来简单的实现promise手写，发现只要将官方的promise整个API执行了解透彻，手写其实还是很好掌握的，一起来看看~ 核心逻辑 首先我们需要知道promise的核心逻辑 01 Promise是一个类，在执行类的时候，需要传递一个执行器，只要new了，执行器就会执行 02 Promise中有三种状态，等待Pending，成功Fulfilled，失败Rejectd，一旦确定就不能再更改 03 resolve和rej
JS手写Promise源码
12-19
为什么要手写Promise？1、深入理解Promise的工作原理：手写Promise可以帮助我们更深入地理解Promise的工作原理和内部机制。通过手动实现Promise的核心功能，如异步调用、状态管理和回调处理，我们可以更好地理解...
手写简易mybatis
03-06
参考mybaits解析配置文件，sqlsession调用，mapper注解扫描动态代理等
手写的Promise，需要的自行下载
12-15
一步一步手写的Promise过程
手写promise.js
02-24
手写promise.js
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 863
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
飞云先生
04-30 117
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
最新发布
stu_kk的博客
05-02 904
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 970
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 375
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 305
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
redux快速入门
qq_73270720的博客
04-29 339
简单的加减案例,学会redux快速入门
js执行顺序
weixin_45392204的博客
04-29 344
同步任务：指的是在主线程上排队执行的任务，只有当前一个任务执行完毕，才能执行下一个任务（按照顺序执行）异步任务：指的是不进入主线程上的任务，进入任务队列的任务，只有当任务队列通知主线程某个异步任务可以执行，方可进入主线程进行执行。异步任务又分宏任务跟微任务宏任务：异步ajax请求、setTimeout、setInterval、文件操作、其他微任务：Promise.then、.catch 和.finally，process.nextTick、其他。
react核心知识
qq_16546829的博客
04-29 701
Fiber架构中处理副作用（side effects）时采用自下而上的方式，这是为了实现更高效的调度和渲染过程，以及更好地支持优先级调度和中断。在Fiber架构中，每个React组件都可以被视为一个fiber节点，这些节点以树状结构组织，形成了React组件树。在渲染过程中，React会遍历整个组件树，并根据需要执行各种操作，比如计算Virtual DOM、处理更新、执行副作用等。异步调度和优先级：自下而上的处理副作用可以更好地支持React的异步调度和优先级调度。
手写promise面试
01-08
手写Promise面试是一个通过手写代码来展示对Promise的理解和掌握程度的面试环节。在面试中，面试官往往会要求面试者用纸笔手写一个简单的Promise实现，或者是解答一些与Promise相关的问题。 首先，面试者需要熟悉...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值