（转）手写promise探究底层原理

最新推荐文章于 2025-04-24 19:47:59 发布
最新推荐文章于 2025-04-24 19:47:59 发布
阅读量1.1k 收藏 7
点赞数 2
分类专栏： js进阶 文章标签： js进阶
版权声明：转载自 https://blog.youkuaiyun.com/wu_xianqiang/article/details/79596707
ES6新增了promise,看它的用法如下 
var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise1);

针对这个例子，我们自己手写一个promise来深入了解下promise的底层原理

function Promise(excutor) {
  let self = this
  self.status = 'pending'
  self.value = null
  self.reason = null
  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value
      self.status = 'fulfilled'
    }
  }
  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason
      self.status = 'rejected'
    }
  }
  try {
    excutor(resolve, reject)
  } catch (err) {
    reject(err)
  }
}

Promise接收一个函数作为参数，该函数有两个参数，一个是resolve，表示成功时执行的函数，一个是reject，表示失败失败时执行的函数。resolve执行时传入的参数会作为then方法中第一个回调函数的参数，reject执行传入的参数会作为then方法中第二函数回调的参数。

Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this
  if (self.status === 'fulfilled') {
    onFulfilled(self.value)
  }
  if (self.status === 'rejected') {
    onRejected(self.reason)
  }
}

Promise中常常会写一些异步代码，等到异步操作执行完成才会触发resolve或者reject函数，当执行then方法的时候此时的状态还是初始的pending状态，所以为了能取到参数，我们可以通过发布订阅模式来写。

基本调用

function Promise(excutor) {
  let self = this
  self.status = 'pending'
  self.value = null
  self.reason = null
  self.onFulfilledCallbacks = []
  self.onRejectedCallbacks = []
  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value
      self.status = 'fulfilled'
      self.onFulfilledCallbacks.forEach(item => item(self.value))
    }
  }
  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason
      self.status = 'rejected'
      self.onRejectedCallbacks.forEach(item => item(self.reason))
    }
  }
  try {
    excutor(resolve, reject)
  } catch (err) {
    reject(err)
  }
}


Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this
  if (self.status === 'fulfilled') {
    onFulfilled(self.value)
  }
  if (self.status === 'rejected') {
    onRejected(self.reason)
  }
  if (self.status === 'pending') {
    self.onFulfilledCallbacks.push(onFulfilled)
    self.onRejectedCallbacks.push(onRejected)
  }
}

我们都知道Promise有一个特点，就是链式调用，当执行then完成后可以继续执行then方法，其实他的原理就是通过返回一个新的Promise实现的，那么then方法中的代码就可以写成下面这样

Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this
  if (self.status === 'fulfilled') {
    return new Promise((resolve, reject) => {
      onFulfilled(self.value)
    })
  }
  if (self.status === 'rejected') {
    return new Promise((resolve, reject) => {
      onRejected(self.reason)
    })
  }
  if (self.status === 'pending') {
    return new Promise((resolve, reject) => {
      self.onFulfilledCallbacks.push(onFulfilled)
      self.onRejectedCallbacks.push(onRejected)
    })
  }
}

then方法接收的两个函数中，可以通过return把值传给下一个步，也可以返回一个新的Promise把值传给下一步，then方法执行的时候有个特点，就是为了保证链式调用，上一次then中不管你是成功还是失败都会把参数作为下一个then中成功时回调的参数，举个例子

let promise1 = new Promise((resolve, reject) => {
  reject('1')
})

let promise2 = promise1.then((res) => {
  return 1
}, (err) => {
  return 2
})
promise2.then((res) => {
  console.log(res)//不管上一次then执行的那个回调函数，在这里都可以接收到参数
})

链式调用

Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this
  if (self.status === 'fulfilled') {
    return new Promise((resolve, reject) => {
      try {
        let x = onFulfilled(self.value)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'rejected') {
    return new Promise((resolve, reject) => {
      try {
        let x = onRejected(self.reason)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'pending') {
    return new Promise((resolve, reject) => {
      self.onFulfilledCallbacks.push(() => {
        let x = onFulfilled(self.value)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      })
      self.onRejectedCallbacks.push(() => {
        let x = onRejected(self.reason)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      })
    })
  }
}

注意不管是成功时的回调还是失败时的回调，都有try/catch包裹，不管成功还是失败都会被下一次resolve接收到，只有代码报错才会执行reject，处理特殊情况，then中没有传成功时的回调函数或失败时的回调函数，代码会报错，所以要指定默认值

Promise.prototype.then = function (onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled :  function (data) {return data}
  onRejected = typeof onRejected === 'function' ? onRejected : function (err) {throw err}
  let self = this
  if (self.status === 'fulfilled') {
    return new Promise((resolve, reject) => {
      try {
        let x = onFulfilled(self.value)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'rejected') {
    return new Promise((resolve, reject) => {
      try {
        let x = onRejected(self.reason)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'pending') {
    return new Promise((resolve, reject) => {
      self.onFulfilledCallbacks.push(() => {
        let x = onFulfilled(self.value)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      })
      self.onRejectedCallbacks.push(() => {
        let x = onRejected(self.reason)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      })
    })
  }
}

指定默认值得时候注意失败时要继续抛出错误，因为只有代码报错才会走reject函数

catch方法

其实catch方法就是then方法的简写

Promise.prototype.catch = function (fn) {
  return this.then(null, fn)
}

完整代码

function Promise(excutor) {
  let self = this
  self.status = 'pending'
  self.value = null
  self.reason = null
  self.onFulfilledCallbacks = []
  self.onRejectedCallbacks = []

  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value
      self.status = 'fulfilled'
      self.onFulfilledCallbacks.forEach(item => item())
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason
      self.status = 'rejected'
      self.onRejectedCallbacks.forEach(item => item())
    }
  }
  try {
    excutor(resolve, reject)
  } catch (err) {
    reject(err)
  }
}


Promise.prototype.then = function (onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled :  function (data) {resolve(data)}
  onRejected = typeof onRejected === 'function' ? onRejected : function (err) {throw err}
  let self = this
  if (self.status === 'fulfilled') {
    return new Promise((resolve, reject) => {
      try {
        let x = onFulfilled(self.value)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'rejected') {
    return new Promise((resolve, reject) => {
      try {
        let x = onRejected(self.reason)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'pending') {
    return new Promise((resolve, reject) => {
      self.onFulfilledCallbacks.push(() => {
        let x = onFulfilled(self.value)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      })
      self.onRejectedCallbacks.push(() => {
        let x = onRejected(self.reason)
        if (x instanceof Promise) {
          x.then(resolve, reject)
        } else {
          resolve(x)
        }
      })
    })
  }
}

Promise.prototype.catch = function (fn) {
  return this.then(null, fn)
}

Github查看源码

手写实现一个Promise
GodLoveMe的博客
06-11 435
promise是前端解决异步的一个重要的东西。请自己实现一个Promise方法，可以满足以上的功能。
手写generator核心原理，再也不怕面试官问我generator原理
weixin_43964148的博客
08-10 1308
手写核心generator原理 文章目录手写核心generator原理1.generator的使用Generator 函数神奇之一：g()并不执行g函数Generator 函数神奇之二：分段执行提问：如果再写一行gen.next();呢？提问：如果g函数没有return语句呢？提问：如果g函数的return语句后面依然有yield呢？提问：如果g函数没有yield和return语句呢？提问：如果只有return语句呢？提问：下面代码会有什么结果？继续提问：如果第二个yield o++;改成yield;会怎样
手写一个Promise
weixin_34019929的博客
03-16 741
promise Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reas...
全网最全手写promise
最新发布
前端成长之路
04-24 240
手把手实现一个Promise，完美通过promiseA+规范测试用例
【前端进阶】手写PromiseA+
weixin_46857470的博客
10-21 233
近期整理的关于手写PromiseA+的相关知识，如果有什么不足或错误请指出，互相学习，共同进步
ES6-手写Promise类逻辑实现
往事不回头,余生不将就
09-24 480
前言 在ES6中的promise想必大家都会用，我想问一下，大家有没有考虑过promise是怎么实现的？ 所以呢，在本篇文章中主要是给大家介绍一下promise类核心逻辑实现，希望可以帮助到大家 promise的特点 先介绍一下promise的特点 1. promise本质上就是一个类， 在执行这个类的时候，需要传递一个执行器进去，这个执行器会立即执行 2. Promise 中有三个状态分别为,成功:fulfilled 失败:rejected 等待:pending pendin.
手写Promise
XunLin233的博客
05-30 2109
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
手写ES6函数与Promise特性的实现及前端框架原理分析
在`fackAchieve`项目中，开发者将通过模拟实现来探究这些框架的核心原理和源码结构。例如，模拟实现Vue框架中响应式数据绑定的原理，理解虚拟DOM的创建和更新机制，以及React的组件生命周期等。通过这种模拟实践，...
揭秘大厂面试：手写Ajax原理与前端核心技术挑战
在这个前端面试大厂手写源码系列（上）中，作者强调了随着前端技术的快速发展，...掌握这些底层原理是前端开发者在求职过程中不可或缺的一部分，因为这不仅能证明技术实力，还能体现解决问题的能力和对技术的深入探究。
2020年前端面试复习必读精选文章【赠复习导图】
xb's area
04-10 3749
前言 之前写过一篇 一年半经验如何准备阿里巴巴前端面试，给大家分享了一个面试复习导图，有很多朋友说希望能够针对每个 case 提供一个参考答案。 写答案就算了，一是精力有限，二是我觉得大家还是需要自己理解总结会比较好。 给大家整理了一下每个 case 一些还算不错的文章吧（还包括一些躺在我收藏夹里的好文章），大家可以自己看文章总结一下答案，这样也会理解更深刻。 并不是所有文章都需要看，希望是一个...
教你如何手写一个Promise
ose_huang的博客
02-25 9786
promise的进阶，手写一个自己的promise
【JavaScript】手写Promise
编码世界
05-15 5037
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
es6 --- > 手写一个promise
栗子好好吃的博客
06-25 674
一个promise实例: var getJSON = function(url) { var promise = new Promise(function(resolve, reject) { // XHR对象发现ajax请求 var client = new XMLHttpReqeust(); client.open("GET", url)...
手写promise（一）
weixin_43956427的博客
03-02 186
Promise为JS的异步编程提供了一种解决方法 JS异步编程的方式还有： 1.发布订阅模式 2.回调函数 3.事件监听 先看下回调函数怎么实现异步编程 回调函数：函数当作参数进行传递， 当满足一定条件时，这个函数被执行 回调函数并不会马上被执行。它会在包含它的函数内的某个特定时间点被“回调”（就像它的名字一样） 模拟请求数据，当拿到数据后，打印出来 这里的回调就是打印 function showData(data) { console.log(data) } function getData(cb) {
手写Promise，一步步实现自己的Promise
小时候可呆了的博客
02-25 1838
手写promise，一步步实现自己的promise，从零到1实现promise
promise手写（完整）
mangguom23的博客
08-17 5691
实现的主要功能如下 Promise.prototype.then Promise.prototype.catch Promise.resolve Promise.reject Promise.all Promise.race 设定三个状态 PENDING、FULFILLED、REJECTED ，只能由PENDING改变为FULFILLED、REJECTED，并且只能改变一次 MyPromise接收一个函数executor，executor有两个参数resolve方法和reject方法 resolve将
面试准备之手写Promise
weixin_49172439的博客
04-30 2484
本文是我在看完尚硅谷Promise教程后整理的手写Promsie，内容可能会稍许有点偏差，仅供参考。 当然，都看到手写Promise了，所以肯定对Promise的基本使用是没问题了，下面就来看看如何手写一份Promise吧。 一、搭建Promise骨架 新建lib文件夹，添加Promise.js文件。 首先采用ES5语法实现，后续会讲解ES6语法实现 // 自定义Promise函数模块: IIFE (function (window) { // Promise构造函数 // executor
手写Promise函数
qq_41973183的博客
08-03 792
手写Promise函数 Promise可以说是面试十次八次都要问的知识点，他就是一个解决异步编程的方案，可以进行优雅的链式回调。 什么叫异步编程？ 网络上有很多非常解释同步异步编程的学术性话语。我个人的理解：异步编程就是一个很好的时间管理者不浪费每一秒，一直都在干活，停不下来的节奏，不会按照顺序等待这一项工作结束才进行下一项工作，而是只要能抽身便去坐下一项工作，等前一项工作需要他的时候他再回来执行；同步编程就是一个比较死板的过程，必须严格按照顺序，这一项工作完全执行了才会执行下一项工作，这样浏览器会有很多白
手写Promise A+
杨兴元的博客
05-17 2370
小试牛刀 初步实现Promise： 1.实现三种状态：‘pending’, ‘fulfilled’, ‘rejected’ 2.能够实现then方法两种回调函数的处理 //promise.js class Promise{ constructor(excutorCallBack){ this.status = 'pending'; this.value = undefined;...
手写promise原理
09-16
手写Promise是一个模拟JavaScript原生Promise的机制，用于处理异步操作的结果。其核心原理主要包括以下几个步骤： 1. **构造函数**：创建一个新的Promise实例，它包含三种状态：pending（等待中）、fulfilled（已成功）和rejected（已失败）。这三个状态是Promise对象的基本属性。 ```javascript function Promise(executor) { let resolve, reject; const promise = { then(onFulfilled, onRejected): Promise, catch(onRejected): Promise, // 等同于then(null, onRejected) state: 'pending', value: undefined, reason: undefined }; try { executor(resolve, reject); } catch (error) { reject(error); } return promise; } ``` 2. **回调函数**：`executor`接收两个函数作为参数，`resolve`用于将Promise从等待状态变为已完成状态并传递结果，`reject`用于将Promise变为已拒绝状态并传递错误。 3. **链式调用**：`then`方法接受两个回调函数，当Promise状态改变时，会依次执行这两个函数。如果当前状态已经是fulfilled，那么就调用第一个回调；如果是rejected，就调用第二个回调（默认的catch方法）。返回的是新的Promise，保持了链式调用的特点。 4. **状态转换**：只有在`resolve`或`reject`内部调用才会改变Promise的状态，外部无法直接修改状态。这样保证了一旦状态确定就不会再变化，提高了代码的可靠性。 ```javascript promise.then((value) => { if (/* 检查状态为fulfilled */) { // 成功处理值 return processValue(value); // 返回另一个Promise } else { throw new Error('处理失败'); } }, (reason) => { // 处理错误 }); ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值