JS—Promise：原理解析

最新推荐文章于 2025-04-27 14:34:27 发布
最新推荐文章于 2025-04-27 14:34:27 发布
阅读量1.3k 收藏 28
点赞数 39
分类专栏： Web知识点 文章标签： javascript 开发语言 ecmascript Promise 原理解析 手把手教会
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27634797/article/details/146568133
版权

个人博客：haichenyi.com。感谢关注

一. 目录

二. Promise 基础概念回顾

上一篇掌握promise中就已经讲过了

  1. 什么是 Promise？
  • promise是JavaScript中在ES6中新增的异步操作的解决方案
  • 本质是一个状态机，包含三种状态：pending(等待)，fulfilled(成功)，rejected(失败)
  • 通过.then()方法链式调用，解决传统回调地狱的问题
  1. 核心特新
  • 状态不可逆： 一旦状态变为fulfilled或者rejected之后，就不可改变了
  • 链式调用： 每个.then()返回一个新的promise
  • 错误冒泡： 链式调用中，错误会一直向后传递，直到被.catch()捕获

三. 深入原理：Promise 如何工作？

  1. 事件循环与微任务（Microtask）
  • 之前异步编程中就讲过了，promise的回调属于微任务，优先级高于宏任务(setTimeout,绑定事件等等)
  • 当promise状态发生改变，.then() 的回调会被放进微任务队列，等待当前宏任务执行完毕之后立即执行
console.log(1);
Promise.resolve().then(() => console.log(2)); // 微任务
setTimeout(() => console.log(3));              // 宏任务
console.log(4);
// 输出顺序：1 → 4 → 2 → 3
  1. 链式调用的实现
  • 每个 .then() 方法都返回一个新的promise，形成链式结构
  • 如果前一个 .then()的回调返回一个值(或新的promise)，该值会成为下一个 then()的输入
new Promise((resolve) => resolve(1))
  .then((val) => val + 1)          // 返回 2
  .then((val) => Promise.resolve(val + 1)) // 返回 Promise(3)
  .then(console.log); // 输出 3

链式调用结果图
3. 错误处理机制

  • 如果链式调用中某一步出现错误（reject 或 throw），会跳过后续所有 .then()，直接进入最近的 .catch()。
  • 内部通过 try/catch 捕获回调中的错误，并传递给下一个 Promise。

四. 手写实现 Promise（简化版）

  我们将手把手教你实现一个符合Promise/A+版本的promise，核心逻辑如下：
要看注释，注释才是为什么这么写的思路
要看注释，注释才是为什么这么写的思路
要看注释，注释才是为什么这么写的思路

export default class MyPromise {

    // new Promise((resolve,reject)=>{

    // })
    //1.构造方法需要传递一个executor，包含两个参数(resolve,reject)
    //这两个参数都是方法，并且，方法接收一个参数，resolve(value),reject(reason)
    //要注意，这两个方法是promise内部定义的，并不是外部传递进来的。
    constructor(executor) {

    }
    //2.有三个状态Pending(等待)，Fulfilled(成功)，Rejected(失败)。
    //并且状态改变不可逆，resolve方法，把状态从pending——>fulfilled
    //reject方法，把状态从pending——>Rejected
    //需要一个成员变量记录当前状态
    static PENDING = "Pending"
    static FULFILLED = "Fulfilled"
    static REJECTED = "Rejected"
    state = MyPromise.PENDING
}

经过上面这两步，我们的类就变成了：

export default class MyPromise {
    //2.有三个状态Pending(等待)，Fulfilled(成功)，Rejected(失败)。
    //并且状态改变不可逆，resolve方法，把状态从pending——>fulfilled
    //reject方法，把状态从pending——>Rejected
    //需要一个成员变量记录当前状态
    static PENDING = "Pending"
    static FULFILLED = "Fulfilled"
    static REJECTED = "Rejected"
    state = MyPromise.PENDING


    //经过上面这两步，构造方法就变成了：
    constructor(executor) {
        //定义初始化状态
        this.state = MyPromise.PENDING
        //定义成功回调的参数
        this.value = undefined
        //定义失败回调的参数
        this.reason = undefined

        //定义成功回调方法
        const resolve = (value) => {
            if (this.state !== MyPromise.PENDING) {
                //不是初始值，就终止
                return
            }
            //状态改为成功
            this.state = MyPromise.FULFILLED
            //成功赋值
            this.value = value
        }
        //定义失败回调方法
        const reject = (reason) => {
            if (this.state !== MyPromise.PENDING) {
                //不是初始值，就终止
                return
            }
            //状态改为失败
            this.state = MyPromise.REJECTED
            //失败赋值
            this.reason = reason
        }

        try {
            //执行异步方法。这才是关键点
            //前面new的时候只是把方法传递进来了，并没有执行。
            //也就是说，你在使用的时候，把你的网络请求方法传递进来了，如果没有这一步，你的网络请求永远不会执行
            //执行之后，把成功回调，和失败回调暴露给你，你根据实际情况调用。
            //Promise的状态都是封装好的，你也不用关心
            executor(resolve, reject)
        } catch (err) {
            reject(err)
        }
    }
}

  这个时候，就会有大聪明了，这么简单，试一下

new MyPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(aaa)
    }, 1000);
})

  写到这里，你就会发现，我resolve了之后，没人去接收aaa这个值啊，官方的promise都是用then方法去接收的。
  没错，接下来，我们来实现这个then方法。我们上一篇说过，then方法有两个参数，一个是onFulfilled(成功回调)，一个是onRejected(失败回调)

then(onFulfilled, onRejected) {
        //1.处理简单的边界情况，非函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
        //2.then方法的返回值还是一个promise，所以这里就要定义一个promise
        const promise2 = new MyPromise((resolve, reject) => {

        })
        return promise2
    }

  接下来就是重点了，到底要怎么触发这个逻辑呢？

//我们都知道，一个回调对应一个状态，成功回调对应成功状态。所以
const promise2 = new MyPromise((resolve, reject) => {
            //成功执行的函数
            const handleFulfilled = () => {

            }
            //失败执行的函数
            const handleRejected = () => {

            }
            if (this.state === MyPromise.FULFILLED) {
                handleFulfilled()
            } else if (this.state === MyPromise.REJECTED) {
                handleRejected()
            } else {

            }
        })

所以，代码就变成上面这个样子了。我差一个题外话
多个then
如上面这个图，同一个promise，是可以调用多个then方法的。每一个then方法都有成功失败的回调。所以，这里需要一个数组去接收。数组放在哪呢？放在构造方法里面初始化。构造方法就变成了如下这个样子了

	...//省略其他代码
	state = MyPromise.PENDING
    //成功回调数组
    onFulfilledCallbacks = []
    //失败回调数组
    onRejectedcallbacks = []

    constructor(executor) {
        //定义成功回调方法
        const resolve = (value) => {
           ...
            //成功赋值
            this.value = value
            //执行所有成功回调
            this.onFulfilledCallbacks.forEach(fn => fn())
        }
        //定义失败回调方法
        const reject = (reason) => {
            ...
            //失败赋值
            this.reason = reason
            //执行所有失败回调
            this.onRejectedcallbacks.forEach(fn => fn())
        }
		...//省略其他代码
    }

然后，我们的then方法就变成了如下这个样子

then(onFulfilled, onRejected) {
        //1.处理简单的边界情况，非函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
        //2.then方法的返回值还是一个promise，所以这里就要定义一个promise
        const promise2 = new MyPromise((resolve, reject) => {
            //成功执行的函数
            const handleFulfilled = () => {

            }
            //失败执行的函数
            const handleRejected = () => {

            }
            //根据当前状态执行
            if (this.state === MyPromise.FULFILLED) {
                handleFulfilled()
            } else if (this.state === MyPromise.REJECTED) {
                handleRejected()
            } else {
                // pending 状态，存入队列
                this.onFulfilledCallbacks.push(handleFulfilled)
                this.onRejectedcallbacks.push(handleRejected)
            }
        })
        return promise2
    }

到这里，我们也只是打好了基础，还是没有写实际执行的代码。也就是我们成功执行的函数和失败执行的函数，那么到底要怎么实现呢？

//成功执行的函数
            const handleFulfilled = () => {
                // 模拟微任务（此处用 setTimeout 简化，实际浏览器用 queueMicrotask）
                setTimeout(() => {
                    try {
                        //执行当前then方法的成功回调
                        const x = onFulfilled(this.value)
                    } catch (error) {
                        //执行出错，执行新的promise的reject回调
                        reject(error)
                    }

                }, 0);
            }
            //失败执行的函数
            const handleRejected = () => {
                setTimeout(() => {
                    try {
                        //执行当前then方法的失败回调
                        const x = onRejected(this.reason)
                    } catch (error) {
                        //执行出错，执行当前promise的reject回调
                        reject(error)
                    }
                }, 0);
            }

如上代码，处理了当执行then方法回调出错的情况。接下来处理正常的情况

const handleFulfilled = () => {
                ...
                        //执行当前then方法的成功回调
                        const x = onFulfilled(this.value)
                        this.resolvePromise(promise2, x, resolve, reject)
                ...
            }
            //失败执行的函数
            const handleRejected = () => {
                ...
                        //执行当前then方法的失败回调
                        const x = onRejected(this.reason)
                        this.resolvePromise(promise2, x, resolve, reject)
               ...
            }
//辅助函数：处理返回值可能是 Promise 的情况
    resolvePromise(promise2, x, resolve, reject) {
        if (x === promise2) {
            return reject(new TypeError('Chaining cycle detected'));
        }
        if (x instanceof MyPromise) {
            x.then(resolve, reject)
        } else {
            resolve(x)
        }
    }

到这里，主要逻辑都写完了。完整的代码如下：

class MyPromise {

    // new Promise((resolve,reject)=>{

    // })
    //1.构造方法需要传递一个executor，包含两个参数(resolve,reject)
    //这两个参数都是方法，并且，方法接收一个参数，resolve(value),reject(reason)
    //要注意，这两个方法是promise内部定义的，并不是外部传递进来的。
    // constructor(executor) {

    // }
    //2.有三个状态Pending(等待)，Fulfilled(成功)，Rejected(失败)。
    //并且状态改变不可逆，resolve方法，把状态从pending——>fulfilled
    //reject方法，把状态从pending——>Rejected
    //需要一个成员变量记录当前状态
    static PENDING = "Pending"
    static FULFILLED = "Fulfilled"
    static REJECTED = "Rejected"
    state = MyPromise.PENDING
    //成功回调数组
    onFulfilledCallbacks = []
    //失败回调数组
    onRejectedcallbacks = []


    //经过上面这两步，构造方法就变成了：
    constructor(executor) {
        //定义初始化状态
        this.state = MyPromise.PENDING
        //定义成功回调的参数
        this.value = undefined
        //定义失败回调的参数
        this.reason = undefined

        //定义成功回调方法
        const resolve = (value) => {
            if (this.state !== MyPromise.PENDING) {
                //不是初始值，就终止
                return
            }
            //状态改为成功
            this.state = MyPromise.FULFILLED
            //成功赋值
            this.value = value
            //执行所有成功回调
            this.onFulfilledCallbacks.forEach(fn => fn())
        }
        //定义失败回调方法
        const reject = (reason) => {
            if (this.state !== MyPromise.PENDING) {
                //不是初始值，就终止
                return
            }
            //状态改为失败
            this.state = MyPromise.REJECTED
            //失败赋值
            this.reason = reason
            //执行所有失败回调
            this.onRejectedcallbacks.forEach(fn => fn())
        }


        try {
            //执行异步方法。这才是关键点
            //前面new的时候只是把方法传递进来了，并没有执行。
            //也就是说，你在使用的时候，把你的网络请求方法传递进来了，如果没有这一步，你的网络请求永远不会执行
            //执行之后，把成功回调，和失败回调暴露给你，你根据实际情况调用。
            //Promise的状态都是封装好的，你也不用关心
            executor(resolve, reject)
        } catch (err) {
            reject(err)
        }
    }

    then(onFulfilled, onRejected) {
        //1.处理简单的边界情况，非函数
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
        //2.then方法的返回值还是一个promise，所以这里就要定义一个promise
        const promise2 = new MyPromise((resolve, reject) => {
            //成功执行的函数
            const handleFulfilled = () => {
                // 模拟微任务（此处用 setTimeout 简化，实际浏览器用 queueMicrotask）
                setTimeout(() => {
                    try {
                        //执行当前then方法的成功回调
                        const x = onFulfilled(this.value)
                        this.resolvePromise(promise2, x, resolve, reject)
                    } catch (error) {
                        //执行出错，执行新的promise的reject回调
                        reject(error)
                    }

                }, 0);
            }
            //失败执行的函数
            const handleRejected = () => {
                setTimeout(() => {
                    try {
                        //执行当前then方法的失败回调
                        const x = onRejected(this.reason)
                        this.resolvePromise(promise2, x, resolve, reject)
                    } catch (error) {
                        //执行出错，执行当前promise的reject回调
                        reject(error)
                    }
                }, 0);
            }
            //根据当前状态执行
            if (this.state === MyPromise.FULFILLED) {
                handleFulfilled()
            } else if (this.state === MyPromise.REJECTED) {
                handleRejected()
            } else {
                // pending 状态，存入队列
                this.onFulfilledCallbacks.push(handleFulfilled)
                this.onRejectedcallbacks.push(handleRejected)
            }
        })
        return promise2
    }

    //辅助函数：处理返回值可能是 Promise 的情况
    resolvePromise(promise2, x, resolve, reject) {
        if (x === promise2) {
            return reject(new TypeError('Chaining cycle detected'));
        }
        if (x instanceof MyPromise) {
            x.then(resolve, reject)
        } else {
            resolve(x)
        }
    }
}

测试如下：
简写promise
关键实现解析：
（1）状态管理

  • 通过 state 变量记录当前状态，确保不可逆。
  • resolve 和 reject 只能修改 pending 状态。

（2）异步回调队列

  • 当 Promise 处于 pending 状态时，.then() 的回调被存入队列。
  • 当状态变化时，依次执行队列中的回调。

（3）链式调用

  • 每个 .then() 返回新的 promise2。
  • 使用 resolvePromise 处理回调返回值：
    • 如果返回普通值，直接 resolve(value)。
    • 如果返回 Promise，等待其解决。

（4）错误处理

  • 使用 try/catch 包裹回调执行，捕获同步错误。
  • 异步错误通过返回的 Promise 传递。

五. 与官方 Promise 的区别

  1. ​微任务队列： 官方 Promise 使用微任务（如 queueMicrotask 或 MutationObserver），而此处用 setTimeout 模拟（实际是宏任务）。
  2. 完整功能： 官方实现包含 .catch()、.finally()、静态方法（如 Promise.all）等。
  3. 边界情况： 官方处理了更多边缘情况（如循环引用、多次 resolve 等）。

六. 总结

  • Promise 的核心是 ​状态管理 + ​回调队列 + ​链式调用。
  • 手写实现需注意：
    • 状态不可变
    • 异步回调的执行顺序
    • 链式调用中返回新 Promise
    • 错误冒泡机制

通过实现一个简化版 Promise，你能更深刻理解 JavaScript 异步编程的设计思想。实际开发中，请直接使用原生 Promise 。

JavaScript Promise 的真正工作原理
wly476923083的博客
09-12 371
Promise 是处理异步代码的一种技术，也称为脱离回调地狱的头等舱门票。
深入理解 JavaScript 中的 Promise ：从基础概念到进阶用法、手写promise
Allen-
07-10 4567
Promise是JavaScript中的一种对象，用于表示一个在未来某个时间点才会完成（或失败）的异步操作及其结果。它提供了一种处理异步操作的统一接口，使代码更加简洁和易于理解。与传统的回调函数相比，Promise能够更好地处理异步操作的结果和错误。Promise作为JavaScript中处理异步操作的一种重要机制，极大地简化了代码编写和异步流程控制。
js常见面试题——详解Promise使用与原理及实现过程（附源码）_promise原理
2401_87298606的博客
09-22 265
（2）promise 对象原型上有一个 then 方法，then 方法会返回一个新的 promise 对象，并且将回调函数 return 的结果作为该 promise resolve 的结果，then 方法会在一个 promise 状态被扭转为 fulfilled 或 rejected 时被调用。Promise.race 和 Promise.all 类似，只不过这个函数会在 promises 中第一个 promise 的状态扭转后就开始后面的处理（fulfilled、rejected 均可）
深入解析Promise：从基础原理到async/await实战
最新发布
m0_73941339的博客
04-27 920
本文全面剖析JavaScript Promise核心机制，详解构造函数、状态流转及resolve/reject工作原理，通过手写实现揭示底层逻辑。涵盖then/catch链式调用、all/race等静态方法，并结合async/await展示现代异步编程最佳实践，帮助开发者彻底掌握从回调地狱到优雅异步处理的完整解决方案。
Javascript-Promise原理
03-06
Promise 对象有三种状态： Pending – Promise对象的初始状态，等到任务的完成或者被拒绝；Resolved – 任务执行完成并且成功的状态；Rejected – 任务执行完成并且失败的状态； Promise的状态只可能从Pending状态转到Resolved状态或者Rejected状态，而且不能逆向转换，同时Resolved状态和Rejected状态也不能相互转换； Promise对象必须实现then方法，then是promise规范的核心，而且then方法也必须返回一个Promise对象，同一个Promise对象可以注册多个then方法，并且回调的执行顺序跟它们的注册顺序一致； then方法接受两个回调函数，它们分别为：成功时的回调和失败时的回调；并且它们分别在：Promise由Pending状态转换到Resolved状态时被调用和在Promise由Pending状态转换到Rejected状态时被调用。
JS实现Promise原理
weixin_34259232的博客
08-16 214
promise是用来解决Js中的异步问题的，js中所有的异步可从callback → promise → generator + co = async + await 其实所有的都是callback的变相处理，只是后者慢慢变的越来越优雅和强壮可扩展。 那么如何实现promise呢？先观察一下promise的样子 let a = new Promise((resolve,reject)=...
js中Promise的原理及实现
CC_Together的博客
04-11 4105
手写Promise
JS Promise实现原理
qq_38733943的博客
04-06 422
https://www.bilibili.com/video/BV1x84y1g7ns/中有详细的视频讲解，下面是我的学习笔记。
Promise 原理
weixin_44990895的博客
02-26 1265
Promise 是一门新的技术（ES6规范） - Promise 是 JS 中进行异步编程的 **新解决方案** ，旧解决方案是单纯使用回调函数
前端跨界开发指南：JavaScript工具库原理解析与实战.docx
09-12
JavaScript 工具库如jQuery、React、Vue等，它们的核心原理在于对JavaScript原生API的封装和优化，提供了诸如DOM操作、事件处理、动画效果、Ajax请求等常用功能，同时引入模块化、异步编程和面向对象或函数式编程的...
perl-promise：Perl中的Promise
02-05
Perl中的Promise是一个强大的工具，它源自JavaScript中的概念，并被引入到Perl编程语言中，用于处理异步编程。Promise是解决回调地狱和使异步代码更易于理解和管理的关键机制。在这个介绍中，我们将深入探讨Promise...
promise.js
09-08
Promise.js Promise承诺函数的实现，支持任何浏览器； 用法与ES6 Promise函数完全一致。。。。。。。。。。。
掌握JavaScript Promise：从基础到高级实践
2. **Promise的基本用法**：`Promise#then()`方法用于处理成功状态，当Promise解析时执行回调函数。`.catch()`方法处理失败状态，当Promise被拒绝时执行回调。这些方法每次调用都会返回一个新的Promise，允许链式...
JavaScript的Promise源码解析
yiguoxiaohai的博客
09-23 628
JavaScript的Promise源码解析
js中promise原理及手动基本实现_V3
哈根达斯~
06-06 262
前言 前一章 前一章链接：https://blog.youkuaiyun.com/weixin_42344533/article/details/117622308
JS Promise原理
ZhouXin_0819的博客
02-28 265
class MyPromise2 { constructor(executor) { this.state = "pending" this.value = undefined this.reason = undefined this.successCB = [] this.failCB = [] let resolve = (value) => { if(this.sta
JavaScript Promise 承诺执行原理浅析
weixin_45866432的博客
02-20 676
文章目录1 参考文档2 本文出发点3 简易理解Promise4 简易理解Promise与JS事件驱动机制5 Promise简易链式调用6 Promise代码解读6-1 基础知识预备6-2 从构造器到resolve/reject结果6-3 从then接口到链式调用7 微信小程序添加finally支持 1 参考文档 深入理解JavaScript事件循环机制 （转）帮你彻底搞懂JS中的prototyp...
Promise 实现原理
泥猴桃的博客
02-21 6729
前言 这篇文章主要是探究 Promise 的实现原理，对于使用方法，这里不做过多概述，如果还有对 Promise 使用方式不太了解的，可以先看 阮一峰老师的 Promise 教程 Promise 是什么,为什么会出现 Promise？ 抽象表达： Promise 是一门新的技术（ES6规范） Promise 是js 中进行异步变成的新解决方案,在没有 Promise 之前，旧方案是单纯使用回调函数 具体表达： 从语法上来说： promise 是一个构造函数 从功能上来说：promise 对象用来封
JS Promise的实现原理
茅坤宝骏氹的博客
07-16 3709
转载自   JS Promise的实现原理　在前端开发过程中，会经常使用到 Promise 模式，可以使异步代码看起来如同步般清新易读，从而从回调地狱中解脱出来。ES6中 已原生支持 Promise，但在未支持的浏览器中还需要通过 polyfill 模拟实现。下面介绍一下自己的实现过程，此实现可通过 Promise/A+测试集 的所有测试。　　Promise 是一个关联了执行任务的承诺，当你的任务...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海晨忆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值