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

最新推荐文章于 2025-10-24 07:15:00 发布
转载 最新推荐文章于 2025-10-24 07:15:00 发布 · 1.2k 阅读 · 7
文章标签：

#js进阶

博客围绕手写Promise展开，旨在深入了解其底层原理。介绍了Promise接收函数参数及异步操作触发机制，可通过发布订阅模式获取参数。还阐述了Promise的链式调用原理，通过返回新Promise实现，以及catch方法是then方法的简写，最后可在Github查看完整代码。
版权声明：转载自 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，一步步实现自己的Promise
小时候可呆了的博客
02-25 1973
手写promise，一步步实现自己的promise，从零到1实现promise
手写实现一个Promise
GodLoveMe的博客
06-11 524
promise是前端解决异步的一个重要的东西。请自己实现一个Promise方法，可以满足以上的功能。
【JavaScript】Promises的详解与底层原理
最新发布
具有多年编程开发经验，分享开发中的经验和优秀案例
10-24 852
Promise核心机制与异步编程实践 Promise是ES6引入的异步编程解决方案，通过状态机模型（pending/fulfilled/rejected）管理异步操作结果。其核心特性包括不可逆的状态转换、链式调用和微任务队列执行机制。Promise通过then/catch/finally方法实现优雅的异步流程控制，避免回调地狱问题。 典型应用场景包括：封装异步请求、实现并行/串行任务调度（Promise.all/race）、定时器封装等。实践中需注意错误捕获、内存管理和性能优化问题。
教你如何手写一个Promise
ose_huang的博客
02-25 9882
promise的进阶，手写一个自己的promise
手写一个Promise
weixin_34019929的博客
03-16 773
promise Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。一旦成功就不允许失败，一旦失败就不允许成功。 function Promise(excutor) { let self = this self.status = 'pending' self.value = null self.reas...
【前端进阶】手写PromiseA+
weixin_46857470的博客
10-21 250
近期整理的关于手写PromiseA+的相关知识，如果有什么不足或错误请指出，互相学习，共同进步
手写实现DOM Diff与Promise的源码仓库
综上所述，该仓库不仅仅是一系列代码片段的集合，更是一种深入探究前端底层原理的学习路径。它鼓励开发者跳出API使用者的角色，转变为机制构建者，通过对DOM-Diff、Promise、面向对象等核心概念的手动实现，建立起对...
手写ES6函数与Promise特性的实现及前端框架原理分析
在`fackAchieve`项目中，开发者将通过模拟实现来探究这些框架的核心原理和源码结构。例如，模拟实现Vue框架中响应式数据绑定的原理，理解虚拟DOM的创建和更新机制，以及React的组件生命周期等。通过这种模拟实践，...
揭秘大厂面试：手写Ajax原理与前端核心技术挑战
在这个前端面试大厂手写源码系列（上）中，作者强调了随着前端技术的快速发展，...掌握这些底层原理是前端开发者在求职过程中不可或缺的一部分，因为这不仅能证明技术实力，还能体现解决问题的能力和对技术的深入探究。
手写generator核心原理，再也不怕面试官问我generator原理
weixin_43964148的博客
08-10 1372
手写核心generator原理 文章目录手写核心generator原理1.generator的使用Generator 函数神奇之一：g()并不执行g函数Generator 函数神奇之二：分段执行提问：如果再写一行gen.next();呢？提问：如果g函数没有return语句呢？提问：如果g函数的return语句后面依然有yield呢？提问：如果g函数没有yield和return语句呢？提问：如果只有return语句呢？提问：下面代码会有什么结果？继续提问：如果第二个yield o++;改成yield;会怎样
手写Promise
XunLin233的博客
05-30 2152
在index.html中编写如下代码resolve("执行成功");})})创建一个promise.js文件在index.html中引入1. Promise能够通过new的方式调用，所以Promise是构造函数的形式。2. 构造Promise实例的时候传过去了一个函数，使用executor（执行器函数接收这个形参）。3. Promise实例能够调用then方法，所以在构造函数的原型上要添加then方法。4. then方法接收两个函数。// Promsie构造函数// 添加then方法。
ES6-手写Promise类逻辑实现
往事不回头,余生不将就
09-24 498
前言 在ES6中的promise想必大家都会用，我想问一下，大家有没有考虑过promise是怎么实现的？ 所以呢，在本篇文章中主要是给大家介绍一下promise类核心逻辑实现，希望可以帮助到大家 promise的特点 先介绍一下promise的特点 1. promise本质上就是一个类， 在执行这个类的时候，需要传递一个执行器进去，这个执行器会立即执行 2. Promise 中有三个状态分别为,成功:fulfilled 失败:rejected 等待:pending pendin.
【JavaScript】手写Promise
编码世界
05-15 5207
面试中经常会被问到你会手写Promise吗？本文带你手撸Promsie
es6 --- > 手写一个promise
栗子好好吃的博客
06-25 694
一个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 208
Promise为JS的异步编程提供了一种解决方法 JS异步编程的方式还有： 1.发布订阅模式 2.回调函数 3.事件监听 先看下回调函数怎么实现异步编程 回调函数：函数当作参数进行传递， 当满足一定条件时，这个函数被执行 回调函数并不会马上被执行。它会在包含它的函数内的某个特定时间点被“回调”（就像它的名字一样） 模拟请求数据，当拿到数据后，打印出来 这里的回调就是打印 function showData(data) { console.log(data) } function getData(cb) {
promise手写（完整）
mangguom23的博客
08-17 5738
实现的主要功能如下 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 2513
本文是我在看完尚硅谷Promise教程后整理的手写Promsie，内容可能会稍许有点偏差，仅供参考。 当然，都看到手写Promise了，所以肯定对Promise的基本使用是没问题了，下面就来看看如何手写一份Promise吧。 一、搭建Promise骨架 新建lib文件夹，添加Promise.js文件。 首先采用ES5语法实现，后续会讲解ES6语法实现 // 自定义Promise函数模块: IIFE (function (window) { // Promise构造函数 // executor
手写Promise函数
qq_41973183的博客
08-03 824
手写Promise函数 Promise可以说是面试十次八次都要问的知识点，他就是一个解决异步编程的方案，可以进行优雅的链式回调。 什么叫异步编程？ 网络上有很多非常解释同步异步编程的学术性话语。我个人的理解：异步编程就是一个很好的时间管理者不浪费每一秒，一直都在干活，停不下来的节奏，不会按照顺序等待这一项工作结束才进行下一项工作，而是只要能抽身便去坐下一项工作，等前一项工作需要他的时候他再回来执行；同步编程就是一个比较死板的过程，必须严格按照顺序，这一项工作完全执行了才会执行下一项工作，这样浏览器会有很多白
手写Promise A+
杨兴元的博客
05-17 2401
小试牛刀 初步实现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（已...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值