Promise深入理解

最新推荐文章于 2025-11-18 15:09:18 发布
原创 最新推荐文章于 2025-11-18 15:09:18 发布 · 1k 阅读 · 29 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#javascript #promise

        本文由浅入深从promise的基本功能开始分析，到最终实现一个可以通过Promise/A+规范872个测试用例的Promise。

 初探 promise
export const getData = () => post('xxxx/xxx');
getData().then(res => {
    // vue 
    this.dataList = res.data;
    // react 
    setData(res.data)
}， err => {
    
})

function post(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({data: [1,2,3]})
        }, 1000)
    })
}

从以上调用中可以发现以下规则：

  • Promise 是一个构造函数；

  • Promise 接受一个函数作为参数，这个函数的参数，是两个函数(resolve, reject)

  • Promise 返回一个对象，这个对象包含一个 then 函数，这个then 函数，接收两个参数，这两个参数，也都是函数。

  • Promise 的 status：

    • pending

      • 初始的状态，可以改变

      • 一个 Promise 在 resolve 或者 reject 之前，都处于这个状态

      • 我们可以通过调用 resolve 或者 reject 方法，让这个 Promise 变成 fulfilled 或者 rejected 的状态。

    • fulfilled

      • 不可变状态

      • 在 resolve 之后，变成这个状态，拥有一个 value

    • rejected

      • 不可变状态

      • 在 reject 之后，变成这个状态，拥有一个 reason

  • then 函数

    • 参数

      • onFulfilled, onRejected 必须是函数类型，如果不是，应该被忽略；

    • onFulfilled 和 onRejected 的特性

      • 在 promise 变成 fulfilled / rejected 状态的时候，应该调用 onFulfilled / onRejected；

      • 在 promise 变成 fulfilled / rejected 状态之前，不应该被调用

      • 只能调用一次。

实现如下：


function LPromise(execute) {
    this.status = "pending";
    this.value = null;
    this.reason = null;
    
    const resolve = (value) => {
        if(this.status === "pending") {
            this.value = value;
            this.status = "fulfilled";
        }
    }
    
    const reject = (reason) => {
        if(this.status === "pending") {
            this.reason = reason;
            this.status = "rejected";
        }
    }
    
    try {
        execute(resolve, reject);
    } catch (error) {
        reject(error)
    }
}

LPromise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled: (data) => { return data };
    onRejected = typeof onRejected === "function" ? onRejected: (error) => { throw error };
    
    if(this.status === "fulfilled") {
        onFulfilled(this.value);
    }
    
    if(this.status === "rejected") {
        onRejected(this.reason);
    }
}
Promise进阶

但是此时并没有实现异步功能，对于以下代码then中并没有打印出什么：

new LPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('hello luyi');
    }, 1000)
}).then(res => {
    console.log(res)
})

这是因为我们在resolve执行的时候，then函数已经执行过了。所以我们如果要实现异步执行，就需要在等执行resolve或者reject的时候去执行then。也就是resolve / reject 执行了之后，再执行 onfulfilled 和 onjected。而且根据Promise/A+规范：2.2.4.onFulfilled 和 onRejected 只有在完成环境堆栈仅包含平台代码时才可被调用，也就是onFulfilled和onJected需要在当前同步任务执行完后执行，所以我们用queueMicrotask方法执行，这也是为什么不管execute中是否有异步，then中的回调函数总会在同步代码执行完后的原因：


function LPromise(execute) {
    this.status = "pending";
    this.value = null;
    this.reason = null;
    // 数组是因为then方法可以多次注册，多次调用
    this.onFulfilledArray = [];
    this.onRejectedArray = [];
    
    const resolve = (value) => {
        if(this.status === "pending") {
            this.value = value;
            this.status = "fulfilled";
            this.onFulfilledArray.forEach(func => func(value))
        }
    }
    
    const reject = (reason) => {
       if(this.status === "pending") {
           this.reason = reason;
           this.status = "rejected";
           this.onRejectedArray.forEach(func => func(reason))
       }
    }
    
    try {
        execute(resolve, reject);
    } catch (error) {
        reject(error)
    }
}

LPromise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled: (data) => { return data };
    onRejected = typeof onRejected === "function" ? onRejected: (error) => { throw error };
    
    if(this.status === "fulfilled") {
        queueMicrotask(() => {
            onFulfilled(this.value);
        })
    }
    
    if(this.status === "rejected") {
        queueMicrotask(() => {
            onRejected(this.reason);
        })
    }

    if(this.status === "pending") {
        this.onFulfilledArray.push(onFulfilled);
        this.onRejectedArray.push(onRejected);
    }
}

此时我们解决了异步调用的问题，可以发现使用的是发布订阅模式，但对于如下代码发现并不如预期结果：

new LPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('hello ln');
        console.log("settimeout")
    }, 1000)
}).then(res => {   
    console.log(res);   // hello ln 
    return res + "ln"
}).then(res => {  
    console.log(res)    // hello ln ln
 })

所以我们还要实现promise的链式调用功能。

Promise的链式调用

  • then 方法，应该返回一个 Promise

      promise2 = promise1.then(onFulfilled, onRejected)

    • onFulfilled / onRejected 的执行结果，为 x， 调用 resolvePromise

    • 如果 onFulfilled / onRejected 执行时抛出异常，我们 promise2 需要被 reject

    • 如果 onFulfilled / onRejected 不是一个函数，promise2 以 promise1 的 value 或者 reason 触发 fulfilled 和 rejected

promise1 中 onfulfilled 返回了一个值，这个值需要被 promise2 进行 resolve ，才能出现在下一个 then(res)。


function LPromise(execute) {
    this.status = "pending";
    this.value = null;
    this.reason = null;

    this.onFulfilledArray = [];
    this.onRejectedArray = [];
    
    const resolve = (value) => {
       if(this.status === "pending") {
            this.value = value;
            this.status = "fulfilled";
            this.onFulfilledArray.forEach(func => func(value))
       }
    }
    
    const reject = (reason) => {
       if(this.status === "pending") {
           this.reason = reason
           this.status = "rejected";
           this.onRejectedArray.forEach(func => func(reason))
       }
    }
    // try catch 
    execute(resolve, reject);
}

LPromise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled: (data) => { return data };
    onRejected = typeof onRejected === "function" ? onRejected: (error) => { throw error };
    
    let promise2;

    if(this.status === "fulfilled") {
        return promise2 = new LPromise((resolve, reject) => {
            queueMicrotask(() => {
                try {
                    // promise1 中 onfulfilled 返回了一个值，这个值需要被 promise2 进行 resolve ，才能出现在下一个 then(res)
                    let result = onFulfilled(this.value);
                    resolve(result);
                } catch(e) {
                    reject(e)
                }
            })
        })
        
    }
    
    if(this.status === "rejected") {
        return promise2 = new LPromise((resolve, reject) => {
            queueMicrotask(() => {
                try {
                    // promise1 中 onfulfilled 返回了一个值，这个值需要被 promise2 进行 resolve ，才能出现在下一个 then(res)
                    let result = onRejected(this.reason);
                    resolve(result);
                } catch(e) {
                    reject(e)
                }
            })
        })
    }

    if(this.status === "pending") {
        return promise2 = new LPromise((resolve, reject) => {
            this.onFulfilledArray.push(() => {
                try {
                    let result = onFulfilled(this.value);
                    resolve(result);
                } catch(e) {
                    reject(e)
                }
            });
            this.onRejectedArray.push(() => {
                try {
                    // promise1 中 onfulfilled 返回了一个值，这个值需要被 promise2 进行 resolve ，才能出现在下一个 then(res)
                    let result = onRejected(this.reason);
                    resolve(result);
                } catch(e) {
                    reject(e)
                }
            });
        })
        
    }
}

此时已经解决了promise最重要的异步和链式调用的问题，但还不够，根据规范在then中返回一个值时，需要运行promise的解决过程：

resolvePromise规范

/*

* @param x then中返回的值

* @param promise2 返回的promise

* @param resolve，rject 返回的promise的resolve，reject方法

/*

resolvePromise(promise2, x, resolve, reject)

规则

  • 如果 promise2 和 x 相等，那么 reject error;

  • 如果 x 是一个 promise

    • 如果 x 是一个pending 状态，那么 promise2 必须要再 pending, 直到 x 变成 fulfilled / rejected

    • 如果 x 被 fulfilled， fulfill promise with the same value

    • 如果 x 被 rejected， reject promise with the same reason

  • 如果 x 是一个 object 或者 function

    • Let thenable = x.then

    • 如果 x.then 这一步出错，那么 reject promise with e as the reason

    • 如果 then 是一个函数，then.call(x, resolvePromiseFn, rejectPromiseFn)

      • resolvePromiseFn 的入参是y, 执行 resolvePromise(promise2, y, resolve, reject)

      • rejectPromiseFn 的入参是 r, reject promise with r

      • 如果 resolvePromiseFn 和 rejectPromiseFn 都调用了，那么第一个调用优先，后面的忽略

      • 如果调用then 抛出异常

        • 如果 resolvePromise 或 rejectPromise 已经被调用，可以忽略

      • 如果 then 不是一个 function， fulfill promise with x

以下是完整代码：

const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
function LPromise(executor) {
  this.status = PENDING
  this.value = null
  this.reason = null
  this.onFulfilledCallbacks = []
  this.onRejectedCallbacks = []

  const resolve = (value) => {
    if (this.status === PENDING) {
      this.status = FULFILLED
      this.value = value
      this.onFulfilledCallbacks.forEach(fun => fun(value))
    }
  }

  const reject = (value) => {
    if (this.status === PENDING) {
      this.status = REJECTED
      this.reason = value
      this.onRejectedCallbacks.forEach(fun => fun(value))
    }
  }

  try {
    executor(resolve, reject)
  } catch (error) {
    reject(error)
  }
}

function resolvePromise(promise, x, resolve, reject) {
  if (promise === x) {
    reject(new TypeError('error due to circular reference'))
  }

  let consumed = false
  let thenable

  let isComplexResult = target => (typeof target === 'function' || typeof target === 'object') && target !== null

  // promise或者类似promise结构的对象都会走此
  if (isComplexResult(x)) {
    try {
      thenable = x.then
      if (typeof thenable === 'function') {

        thenable.call(
            x,
            function (value) {
              if (consumed) {
                return
              }
              consumed = true
              return resolvePromise(promise, value, resolve, reject)
            },
            function (error) {
              if (consumed) {
                return
              }
              consumed = true
              return reject(error)
            }
          )
      } else {
        resolve(x)
      }
    } catch (error) {
      if (consumed) {
        return
      }
      reject(error)
    }
  } else {
    resolve(x)
  }
}

LPromise.prototype.then = function (onFulfilled, onRejected) {
  onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (value) => value
  onRejected = typeof onRejected === 'function' ? onRejected : (error) => { throw error }

  let promise2;

  if (this.status === FULFILLED) {
    return promise2 = new LPromise((resolve, reject) => {
      queueMicrotask(() => {
        try {
          const x = onFulfilled(this.value)
          resolvePromise(promise2, x, resolve, reject)
        } catch (error) {
          reject(error)
        }
      })
    })
  }

  if (this.status === REJECTED) {
    return promise2 = new LPromise((resolve, reject) => {
      queueMicrotask(() => {
        try {
          const x = onRejected(this.reason)
          resolvePromise(promise2, x, resolve, reject)
        } catch (error) {
          reject(error)
        }
      })
    })
  }

  if (this.status === PENDING) {
    return promise2 = new LPromise((resolve, reject) => {
      this.onFulfilledCallbacks.push(() => {
        queueMicrotask(() => {
          try {
            const x = onFulfilled(this.value)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      })
      this.onRejectedCallbacks.push(() => {
        queueMicrotask(() => {
          try {
            const x = onRejected(this.reason)
            resolvePromise(promise2, x, resolve, reject)
          } catch (error) {
            reject(error)
          }
        })
      })
    })
  }
}

最后用官方测试用例跑一下，全部通过：

深入理解 Promise：使用指南与手动实现
vvilkin的学习备忘
03-04 1598
Promise是一个表示异步操作最终完成（或失败）及其结果值的对象。Pending（等待中）：初始状态，既不是成功，也不是失败。Fulfilled（已成功）：操作成功完成。Rejected（已失败）：操作失败。Promise的核心功能是通过thencatch和finally方法处理异步操作的结果。通过本文，我们学习了Promise的基本用法，包括创建、使用、链式调用以及静态方法。同时，我们还手动实现了一个简化版的Promise，深入理解了Promise。
前端 | 深入理解Promise
2502_90366796的博客
02-01 2286
JavaScript 作为单线程语言，利用回调函数处理异步操作，但回调地狱使得代码难以维护。ES6 引入 Promise 解决异步编程问题，使异步操作更清晰。Promise 具有 pending、resolved 和 rejected 三种状态，并且状态一旦改变就不可逆。Promise 提供 then、catch、all、race 等方法，其中 async/await 进一步简化了异步操作，使代码更清晰、易读，同时支持 try/catch 捕获错误。此外，文中还介绍了 Promise 及其方法的手写实现，帮
Promise的深入理解
weixin_45318508的博客
09-15 308
promise的理解以及含义
深入理解Promise
分享互联网的有趣知识~
01-19 1632
Promise的前提概念：状态，执行，执行顺序，结果和返回值。Promise的参数和嵌套执行、Promise内置方法：race、any、all、allSettled、finally、try、resolve、reject
深入理解 Promise：原理、实现与事件循环中的角色，看这篇就够了
qq_39279448的博客
12-17 1244
方法功能概述成功返回失败返回创建一个 Fulfilled 状态的 Promisevalue创建一个 Rejected 状态的 Promisereason所有 Promise 成功时返回结果数组，任意一个失败则直接返回该失败的 Promise结果数组第一个失败的 Promise等待所有 Promise 完成，无论成功或失败包含状态和值/原因的结果对象数组永远不会失败返回第一个完成（成功或失败）的 Promise第一个完成的结果第一个完成的错误。
Promise【一篇搞懂】
weixin_50539249的博客
04-04 8937
MDN 上的定义：一个Promise对象代表一个在这个Promise被创建出来时不一定已知的值。它让您能够 把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。抽象表达：Promise 是 ES6 引入的异步编程的新解决方案。在 Promise 出现之前，只是单纯的使用回调函数。
深入理解Promise框架（解决js中的回调地域问题！）
xz1458102234的专栏
08-24 798
原文地址链接：深入理解promise
深入理解 JavaScript Promise
a3098448071的博客
06-24 1340
Promise 是一个表示异步操作最终完成或失败的对象。它代表了某个未来才会知道结果的事件（通常是一个异步操作）。Promise 是一个包含三种状态的对象：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 作为现代 JavaScript 异步编程的核心，为开发者提供了一种清晰、可控的方式来管理复杂的异步流程。通过理解 Promise 的基本概念、状态、链式调用以及错误处理，我们可以编写出更加模块化、易于维护的代码。
Promise 深入理解与实践
最新发布
aweiname2008的博客
11-18 1054
理解 Promise 的执行机制：executor 同步执行，异步操作在回调中完成 掌握状态转换：pending → fulfilled/rejected，状态不可逆 实践项目应用：结合实际项目理解 Promise 的使用场景 掌握 import() 懒加载：理解函数定义与函数调用的区别
深入理解promise
xy19950125的博客
09-27 223
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。 特点： 1.对象的状态不受外界影响 （Pending（进行） Resolve(成功) Reject(失败)） 2.一旦状态改变就不会再变 简单用法 var promise = new Promise(function(resolve, reject){ if (/* 异步...
番外：深入理解Promise - 03 Promise的几个重要问题
wucan111的博客
01-02 278
Promise的几个重要问题 一、 Promise什么时候发生状态改变？什么时候获取值？ 前面说过Promise的excutor是同步执行的回调函数，但是可以触发异步任务，因此有两种情况： 在excutor执行器中立即同步执行调用敲定函数，于是同步的实例改变状态并且获取到结果 在excutor执行器中异步的执行调用敲定函数，比如setTimeout，于是异步的改变实例状态并获取结果 二、Promise的实例什么一定要改变状态前指定回调函数吗？ 不！Promise的实例可以在任何时候指定或者说绑定
Chaper 09 深入理解Promise
2302_80253507的博客
09-02 1413
在JavaScript中，异步编程是一个重要的概念。随着应用程序的复杂性增加，处理异步操作的方式也变得更加复杂。Promise是一种用于处理异步操作的对象，它提供了一种更清晰和更强大的方式来管理异步代码。本章详细讲解了Promise的基本用法以及链式调用。
【JS】779- 深入理解Promise
pingan8787
11-16 458
这是布兰的第 7 篇原创从异步编程说起我们都知道 JavaScript 的代码执行的时候是跑在单线程上的，可以理解为只能按照代码的出现顺序，从上到下一行一行的执行，但是遇到了异步的行为，...
从深入理解到自定义Promise--下篇
maqiu233的博客
10-18 226
手写Promise实现定义整体结构完成构造函数的实现Promise.then/catch的实现Promise.resolve/reject的实现Promise.all/race的实现Promise.resolveDelay/rejectDelay的实现Promise完整版 定义整体结构 完成构造函数的实现 Promise.then/catch的实现 Promise.resolve/reject的实现 Promise.all/race的实现 Promise.resolveDelay/rejectDelay的实
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值