前端必须学会的经典面试题场景之一 —— 手写Promise

已于 2022-06-09 15:28:43 修改
阅读量2.4k 收藏 8
点赞数 1
CC 4.0 BY-SA版权
分类专栏： JavaScript js函数 文章标签： 前端 javascript 面试
于 2022-06-06 17:44:03 首次发布
原文链接：https://juejin.cn/post/7102703565566640136#heading-14
本文详细介绍了如何手写一个基本的Promise实现，包括构造函数、resolve和reject的使用，状态管理以及then方法的实现。通过逐步解析，展示了Promise如何处理异步操作，实现状态转变以及链式调用。文中还探讨了如何优化then方法以支持多次调用和链式调用，并提到了在实际面试中可能需要考虑的错误处理和类型判断等进阶问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Promise作为JS中异步编程最为强大的解决方案之一，ES6将其写进了语言标准，统一了用法。
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。
  • 下面我们自己实现一个Promise：

Promis的手写实现我们用到用到ES6中的Class类，当然用构造函数也是一样的，基本骨架如下：

class ZhouPromise {
  constructor(executor) {
    const resolve = (res) => {
      console.log(res);
    };
    const reject = (err) => {};
    executor && executor(resolve, reject);
  }
}

const promise = new ZhouPromise((resolve, reject) => {
  resolve('zhoubaba');
})

当我们new ZhouPromise的时候，执行类的constructor构造器，接收一个函数执行体，同时并且 执行将自定义的resolve，reject传递进去当做resolve，reject的参数变量接收。

  • resolve作用是将Promise对象状态由“未完成”变为“成功”，也就是Pending -> Fulfilled，在异步操作成功时调用，并将异步操作的结果作为参数传递出去；而reject函数则是将Promise对象状态由“未完成”变为“失败”，也就是Pending -> Rejected，在异步操作失败时调用，并将异步操作的结果作为参数传递出去。
const PROMISE_STATUS_PENDING = "pending";
const PROMISE_STATUS_FULFILLED = "fulfilled";
const PROMISE_STATUS_REJECTED = "rejected";

constructor构造器内部状态,默认为pending

this.status = PROMISE_STATUS_PENDING;
this.value = undefined;
this.reason = undefined;

改变resolve和rejected，当执行的时候修改status状态

const resolve = (value) => {
  if (this.status === PROMISE_STATUS_PENDING) 
   {      
    this.status = PROMISE_STATUS_FULFILLED;
        this.value = value;
       console.log("status", this.status, "val  ue", this.value);
      }
    };
const reject = (reason) => {
  if (this.status === PROMISE_STATUS_PENDING)    {
      this.status = PROMISE_STATUS_REJECTED;
      this.reason = reason;
        console.log("status", this.status, "reason", this.reason);
      }
   }

const p = new ZhouPromise((resolve, reject) => {
     resolve("fulfilled状态"); // status fulfilled value fulfilled状态
     //reject("rejected状态"); // status rejectedvalue rejected状态
});
then方法的实现：
  • Promise实例生成后，可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数：
  1. Promise对象状态改为Resolved时调用 （必选）
  2. Promise对象状态改为Rejected时调用 （可选）

简单实现：

constructor(executor) {
    ...
    this.onFulfilled = undefined; // ！新增
    this.onRejected = undefined; // ！新增
    const resolve = (value) => {
        ...
        this.onFulfilled(this.value); // ！新增
      }
    };
    const reject = (reason) => {
        ...
        this.onRejected(this.reason); // ！新增
      }
    };
  }

 then(onFulfilled, onRejected) { // ！新增
    this.onFulfilled = onFulfilled;
    this.onRejected = onRejected;
  }
  
 ...
 p.then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);

如上代码所示（部分重复代码用…展示），constructor添加两个onFulfilled，onRejected用来存储then函数的回调。定义类的then方法，接收两个回调，同时赋值。
在这里插入图片描述

会发现resolve执行后会报错，那是因为new promise里的回调函数是同步执行的，当resolve的时候，p.then还没有执行，所以onFulfilled 为undefined。我们需要给resolve内部添加setTimeout或者queueMicrotask异步任务。异步任务不会阻塞代码，会进入到宏任务中。等到同步代码p.then执行完后再去执行resolve。
所以如下修改resolve和reject函数:

 const resolve = (value) => {
      if (this.status === PROMISE_STATUS_PENDI    NG) {
        this.status = PROMISE_STATUS_FULFILLED;
        queueMicrotask(() => { // ！新增
          this.value = value;
          this.onFulfilled(this.value);
        });
      }
    };


  const reject = (reason) => {
      if (this.status === PROMISE_STATUS_PENDING) {
        this.status = PROMISE_STATUS_REJECTED;
        queueMicrotask(() => { // ！新增
          this.reason = reason;
          this.onRejected(this.reason);
        });
      }
    };
至此，一个then回调完成了。

这就是promise简单的基本手写思路。在面试中写到这里已经基本差不多了。但是可以更加完全接近promise的所有功能。

优化 .then

原生Promise的then方法可以被多次调用，这有点像Vue内的响应式收集。当我们调用多个then方法，会被收集到桶里面。
例如：

p.then(
  (res) => {
    console.log("res1", res);
  },
  (err) => {
    console.log("err1", err);
  }
);
p.then(
  (res) => {
    console.log("res2", res);
  },
  (err) => {
    console.log("err2", err);
  }
);
setTimeout(() => {
  p.then(
    (res3) => {
      console.log(res3 + "res3");
    },
    (err3) => {
      console.log(err3 + "err3");
    }
  );
}, 1000);

所以收集then回调的得是个可迭代的对象或者数组，在这里用数组代替。在resolve或者reject执行时对收集的数组内遍历函数。

  this.onFulfilled = [];//修改
  this.onRejected = [];//修改

----------------------------
  const resolve = (value) => {
      if (this.status === PROMISE_STATUS_PENDING) {
       //this.status = PROMISE_STATUS_FULFILLED; // !变动到微任务内
        queueMicrotask(() => {
          this.status = PROMISE_STATUS_FULFILLED;
          this.value = value;
          this.onFulfilled.forEach((fn) => { // !修改
            fn && fn(this.value);
          });
        });
      }
    };
    
  const reject = (reason) => {
      if (this.status === PROMISE_STATUS_PENDING) {
        //this.status = PROMISE_STATUS_REJECTED; // !变动到微任务内
        queueMicrotask(() => {
          this.status = PROMISE_STATUS_REJECTED;
          this.reason = reason;
          this.onRejected.forEach((fn) => { // !修改
            fn && fn(this.reason);
          });
        });
      }
    };

同时then方法内也要修改，防止在全局异步下添加的then函数没有被执行，如果当前状态已经被修改了，说明queueMicrotask已经执行了，是全局setTimeout添加的then方法，就直接执行函数；如果仍然是pending，说明仍然在收集then回调。

 then(onFulfilled, onRejected) {
    if (this.status === PROMISE_STATUS_FULFILLED && onFulfilled) {//新增
      onFulfilled(this.value);
      return
    }
    if (this.status === PROMISE_STATUS_REJECTED && onRejected) {//新增
      onRejected(this.reason);
      return
    }
    if (this.status === PROMISE_STATUS_PENDING) {
      this.onFulfilled.push(onFulfilled);
      this.onRejected.push(onRejected);
    }

这里特别注意一点： resolve和reject函数内的queueMicrotask微任务前的this.status状态改变需要移入queueMicrotask内部判断;不然会出现如下undefined效果：
在这里插入图片描述
原因是在新增的then方法内做了状态判断，在改变状态后执行为微任务队列，p.then方法会直接执行当前回调，所以this.value是undefined，我们需要将状态改变放到微任务队列中。

  • 如何实现then的链式调用？我们知道then会返回一个promise对象，所以then需要return一个出去
  then(onFulfilled, onRejected) {
    return new MjcPromise((resolve, reject) => {
      if (this.status === PROMISE_STATUS_FULFILLED && onFulfilled) {
        onFulfilled(this.value);
        return;
      }
      if (this.status === PROMISE_STATUS_REJECTED && onRejected) {
        onRejected(this.reason);
        return;
      }
      if (this.status === PROMISE_STATUS_PENDING) {
        this.onFulfilled.push(onFulfilled);
        this.onRejected.push(onRejected);
      }
    });
  }

最麻烦的问题来了，当前return 出去的promise是需要resolve或者reject的，而我们必须得拿到上一次结果的返回值，在新promise内resolve（）出去。我们需要改变this.onFulfilled//onRejected的push对象，拿到返回值在这里resolve。

 then(onFulfilled, onRejected) {
    return new ZhouPromise((resolve, reject) => {
      ...
      if (this.status === PROMISE_STATUS_PENDING) {
        this.onFulfilled.push(() => {
          let value = onFulfilled(this.value);
          resolve(value);
        });
        this.onRejected.push(() => {
          let value = onRejected(this.reason);
          resolve(value);
        });
      }
    });
  }

当用箭头函数的作用可以通过this的不绑定原则能拿到实例上的值。

p.then(
  (res) => {
    console.log("res1", res);
    return "mjc";
  },
  (err) => {
    console.log("err1", err);
    return "mjcerr";
  }
).then(
  (res) => {
    console.log("res2", res);
  },
  (err) => {
    console.log("err2", err);
  }
);

一开始这种处理确实难理解，因为没看懂this和resolve代表哪个promise。我们只要清楚this指向就知道如何执行的。如图：
在这里插入图片描述
我们在promise内传递的函数是箭头函数，那就意味着this指向上下文，也就是说this是指向上一个promise实例，而resolve的调用是处理当前new ZhouPromise对象的状态。
在这里插入图片描述

至此已经基本实现链式调用了。事实上剩下的是错误不断处理，判断类型正确，因为篇幅有限不展开了。 以上部分思路参考promiseA+以及coderwhy大神技术参考。

本篇文章内部分示例引用：
作者：麦当当
链接：https://juejin.cn/post/7102703565566640136
来源：稀土掘金

感谢阅读，有什么问题可以在评论区或后台留言讨论~
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

手写promise-面试版
2402_85402030的博客
06-05 1150
then回调是支持链式调用的，也就是then.then.then，并且由api特性可知then是return一个promise的，并且这个promise的res是上一个promise的。，仔细看这一步，我们之前的想法是让这个定时器回调push到队列中，但如果这样写的话相当于将回调执行后的返回值push到队列中，仔细想想是不是这样呢！的then回调，当then回调检测到状态没有发生改变则将回调函数push到各种的队列中，状态发生改变后在从队列中取出回调函数执行。时then回调会出现问题。
手写promise(经典面试题)
qingsemengshou的博客
08-05 650
class SPromise { constructor(executer) { this.state = "pending"; this.value = null; this.reason = null; this.onResolvedList = []; this.onRejectedList = []; let resolve = (value) => { if (t.
手写一个Promise
weixin_34019929的博客
03-16 747
promise Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reas...
前端面试题——场景题
最新发布
qianqianyixue的博客
06-24 371
我用vue开发的所有项目，都是采用组件化的思想开发的。一般我在搭建项目的时候，会创建一个views目录和一个components目录，views目录中放页面级的组件，components中放公共组件（如：head（公共头组件），foot（公共底部组件）等）2、当用户登录后，获取用roles，将roles和路由表每个页面的需要的权限作比较，调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由，生成最终用户可访问的路由表。
面试题——————手写一个Promise
weixin_57089449的博客
03-21 1635
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reason = null function resolve(value) { if (self.status ===
经典Promise面试题----手写Promise详细步骤（一）
czj1049561601的博客
02-17 5993
Promise的封装–手写一个Promise–实现基本结构以及resolve、reject结构功能实现！ 1. 初始结构的搭建 步骤结构的简介： 1：在文件夹中新建两个文件，一个index.html作为入口，另外一个promise.js作为封装主体函数 2：引入自定义的Promise.js，来使用自定义手写的Promise，如果不引入的话，下面实例化的p就是由全局的Promise实例化出来的。 3：现在我们想要自定义，所以script标签引入来覆盖掉全局的Promise，于是新建Promise
面试准备之手写Promise
weixin_49172439的博客
04-30 2488
本文是我在看完尚硅谷Promise教程后整理的手写Promsie，内容可能会稍许有点偏差，仅供参考。 当然，都看到手写Promise了，所以肯定对Promise的基本使用是没问题了，下面就来看看如何手写一份Promise吧。 一、搭建Promise骨架 新建lib文件夹，添加Promise.js文件。 首先采用ES5语法实现，后续会讲解ES6语法实现 // 自定义Promise函数模块: IIFE (function (window) { // Promise构造函数 // executor
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
m0_59529616的博客
08-03 1091
★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
记录遇到的web前端开发面试题（八股文）
热门推荐
qq_41347964的博客
04-20 1万+
文章目录前言一、javascript相关1.js的八个基本数据类型（高频）2.this的五种指向方式3.Function的call，apply和bind方法的区别？4.Promise，手写promise5.闭包6.原型链，作用域链与原型链的区别？7.继承与继承的五种实现方式8.深拷贝与浅拷贝的区别？（高频）9.事件委托10.var，const和let对比（高频）11.宏任务与微任务12.bind的实现方式13.eventloop，事件循环（超高频）14.new的过程，手动实现一个new方法15.0.1+0.
前端面试----深信服面试题全概
huohuoit的博客
07-16 4648
这里结合了优快云多位博主的深信服面试题，为了锻炼自己的答题能力和技术点理解，这里对博主的各个题目进行了自己的解答（最好用自己的理解自己的话解答），同时部分解答借鉴了博主的回答。记在word笔记的时候没有记录博主地址，但还是感谢分享，一起努力加油啊！ 一、HTML （1）常见的HTML块级元素和行内元素 （2）HTML5的新标签有什么了解，详述一下表单的新标签 （3）Image标签中alt和title有什么区别 二、CSS （1）CSS盒子模型（IE盒子模型，标准盒子模型） （2）CSS元素居
「2021」高频前端面试题汇总之JavaScript篇（上）
优快云_KONGlX的博客
07-07 649
.markdown-body { color: rgba(56, 56, 56, 1); font-size: 15px; line-height: 30px; letter-spacing: 2px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open...
前端高频面试题（15K级别）
qq_22181899的博客
07-23 2688
1.简单描述一下 Babel 的编译过程？ 首先，Babel的作用是 从一种源码到另一种源码，充当转换编译器的作用，可以简述为 解析（解析JS代码）->转换（解析和修改AST）->重建（将修改后的AST转换成另一种JS代码） 2.JavaScript 中的数组和函数在内存中是如何存储的？ 数组，JS里的数组主要就是 以连续内存形式存储的FixedArray、以哈希表形式存储的HashTable 函数，函数属于引用数据类型，存储在堆中，在栈内存中只是存了一个地址来表示对堆内存中的引用。当解
面试题：如何手写一个Promise（详细版）
m0_60255104的博客
10-14 656
【代码】面试题：如何手写一个Promise（详细版）
面试题 手写Promise
YufJi的博客
07-10 1082
class Promise{  constructor(executor){    this.state = 'pending';    this.value = undefined;    this.reason = undefined;    this.onResolvedCallbacks = [];    this.onRejectedCallbacks = [];    let reso...
手写Promise
qq_45517916的博客
03-09 279
//js const PENDING = 'pending'; const RESOLVED = 'resolved'; const REJECTED = 'rejected'; function MyPromise(fn) { // 保存初始化状态 var self = this; // 初始化状态 this...
手写实现promise
weixin_44935752的博客
08-22 302
function myPromise(constructor){ let self=this; self.status="pending" //定义状态改变前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 function resolve(value){ //两个==="pending"，保证了状态的改变是不可逆的
前端面试之手写promise
叫我阿豪
12-16 395
大厂面试一般喜欢问的底层源码手写，废话不多说，直接上代码！
前端面试题 - 手写一个Promise
weixin_46557501的博客
10-08 954
前端面试题 - 手写一个Promise问题一：同步与异步的区别？问题二：为什么使用Promise?问题三：手写一个Promise?问题四：前端异步都有哪些场景？ 问题一：同步与异步的区别？ JavaScript是单线程语言，同步会阻塞代码执行，异步不会阻塞代码执行。 补充：JavaScript是单线程语言，意味着只能同时做一件事。也就是说，发送请求遇到阻碍时，浏览器会卡住，卡住期间不能滚动、不能点击、不能有动画。异步是基于callback回调函数形式来调用的，每个异步都有回调函数。代码执行的顺序，先执行同步
前端 面试----手写promise（promise自定义封装）
WXY博客
06-09 1041
---------简单来说，函数是为了解决异步回调时的一些问题，更准确来说是为了解决我们在开发中，经常会面临的“回调地狱”所给开发者带来的困扰。promise可以被理解成一个方案，来有助于我们快速规避这些麻烦，从而提高我们的开发效率。----------我们知道一个Promise函数的状态必然处于以下几种状态中的一个：待定（pending）已兑现（fulfilled）已拒绝（rejected）
前端面试宝典：覆盖经典题、手写题及场景实战
它涵盖了经典面试题、手写题、以及JavaScript版的数据结构与算法等，还包括了各种实际工作中可能遇到的场景题。资源中的代码示例都附有详尽的注释，有助于理解和学习。 为了更好地利用这份资源，给出了一条推荐的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值