Promise - （六）关于then参数回调函数的缓存位置理解

本是古典何须时尚 2023-09-29 13:55 33阅读 0赞

题目来源于：[【JS】因两道Promise执行题让我产生自我怀疑，从零手写Promise加深原理理解 - 听风是风 - 博客园 (cnblogs.com)][JS_Promise_Promise_ - _ - _ _cnblogs.com]

const fn = (s) => {
      new Promise((resolve, reject)=>{
        if(typeof s === 'number') {
          resolve()
        } else {
          reject()
        }
      })
      .then(res => {
        console.log('数字');
      })
      .catch(err => {
        console.log('字符串');
      })
    }
    
    fn('1')
    fn(1)

此题结果为

![e2f9bcef5766435fb473a4e8309ff145.png][]  
①首先fn('1')执行中，new Promise会同步返回一个rejected态的promise1对象，  
②之后promise1对象会继续同步调用then方法，由于是promise1是失败态的，所以会将then方法的第二个参数回调（onReject回调）加入异步微任务队列  
【ps：当未传onReject回调给then方法时，then方法内部会生成一个默认的onReject回调，即异常穿透回调 err => \{throw err\}】  
③ 此时promise1.then执行结果会同步返回一个pending态的promise2对象，promise2对象的状态改变依赖于被加入异步微任务队列中onReject回调的执行  
④ promise2对象继续同步调用catch方法，由于promise2对象是pending态的，所以catch方法的参数回调函数不会被加入异步微任务队列，而是缓存进了promise2对象的内部属性中，等待promise2对象的状态从pending态变为其他态时，catch的参数回调函数才会被加入异步微任务队列。  
⑤ 此时fn('1')同步执行完成，下面开始执行fn(1)  
⑥同理fn(1)中new Promise会同步地返回一个成功fulfilled态的promise3对象  
⑦ promise3对象同步调用then方法，并将then方法的onFulfill回调参数加入异步微任务队列，并返回一个pending态的promise4对象  
【ps.此时异步微任务队列中已有两个回调函数，依次是promise1对象加入的 err=>\{throw err\}，和promise3加入的 res => console.log('参数是一个number')】  
⑧ promise4对象继续同步调用catch方法，由于promise4对象是pending的，所以将catch的回调函数参数缓存进自身内部属性中  
⑨ 至此fn(1)同步执行完成，JS主线程检查同步代码都执行完了，则开始事件循环，去异步任务队列中取回调到执行栈执行，由于异步宏任务队列是空的，所以直接从异步微任务队列中取出第一个回调函数，即promise1对象加入的 err=>\{throw err\}  
⑩ promise1对象加入的 err=>\{throw err\}执行，就会导致promise2对象的状态变为rejected，进而导致promise2对象将缓存在内部属性中的失败回调err => console.log('参数是一个字符串') 加入异步微任务队列中。  
【ps.此时异步微任务队列出了一个，进了一个，剩下的依次是：promise3加入的 res => console.log('参数是一个number') 和 promise2加入的err => console.log('参数是一个字符串') 】  
之后就好理解了，JS主线程继续依次取出异步微任务队列中的回调执行，所以先打印了number，再打印了”字符串“

[JS_Promise_Promise_ - _ - _ _cnblogs.com]: https://www.cnblogs.com/echolun/p/15890147.html
[e2f9bcef5766435fb473a4e8309ff145.png]: https://img-blog.csdnimg.cn/e2f9bcef5766435fb473a4e8309ff145.png

发表评论取消回复

表情：

评论列表（有 0 条评论，33人围观）

还没有评论，来说两句吧...

相关阅读

相关 Promise - （五）then方法参数回调函数加入异步微任务队列的时机

先看一个例子 Promise.resolve().then(()=>{ setTimeout(()=>{ console.lo

系统管理员/ 2023年10月01日 08:22/ 0 赞/ 22 阅读

相关 Promise - then参数回调函数返回值为Promise对象时产生的两次微任务说明

[【JS】因两道Promise执行题让我产生自我怀疑，从零手写Promise加深原理理解 - 听风是风 - 博客园 (cnblogs.com)][JS_Promise_Prom

缺乏、安全感/ 2023年09月29日 14:09/ 0 赞/ 40 阅读

相关 Promise - （六）关于then参数回调函数的缓存位置理解

题目来源于：[【JS】因两道Promise执行题让我产生自我怀疑，从零手写Promise加深原理理解 - 听风是风 - 博客园 (cnblogs.com)][JS_Promis

本是古典何须时尚/ 2023年09月29日 13:55/ 0 赞/ 34 阅读

相关理解回调函数

深入浅出理解Node.js中的回调函数（callback） > 究竟什么是回调函数(Callback)，网上有许许多多的文章，大部分看得人云里雾外，这些文章大概分成两类，

川长思鸟来/ 2023年06月13日 09:24/ 0 赞/ 72 阅读

相关 Promise——告别回调函数

今天我们就接着来聊聊微任务的另外一个应用 Promise，DOM/BOM API 中新加入的 API 大多数都是建立在 Promise 上的，而且新的前端框架也使用了大量的 P

以你之姓@/ 2022年10月06日 00:53/ 0 赞/ 257 阅读

相关回调函数的理解

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_

深藏阁楼爱情的钟/ 2022年09月10日 05:28/ 0 赞/ 237 阅读

相关回调函数的理解

函数指针的用途，一般是在回调函数中使用，那么回调函数是干什么用的了？ C++ Primer Plus中举了这样一个列子：假设我们要设计一个名为estimate()的函数，

柔情只为你懂/ 2022年08月13日 18:53/ 0 赞/ 247 阅读

相关关于回调函数

百度对于回调函数是这样子说明的，回调函数是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针调用它所指向的函数时，我们就说是回调函

青旅半醒/ 2022年07月12日 10:51/ 0 赞/ 250 阅读

相关关于回调函数

百度对于回调函数是这样子说明的，回调函数是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针调用它所指向的函数时，我们就说是回调函

太过爱你忘了你带给我的痛/ 2022年07月12日 10:51/ 0 赞/ 238 阅读

相关 [20190807] 回调函数与promise的写法

回调函数的写法： asyncFunction1(callback){ // ... asyncFunction2(callback)

红太狼/ 2021年11月05日 10:20/ 0 赞/ 307 阅读