原文链接在这里:https://juejin.cn/post/7018765637870698503
小嘟和大家一起学习,有问题欢迎留言,争取咱们都成为大佬,加油!

看到这样一个问题:

类似的问题还有

Promise.resolve().then(() => {console.log(0);return Promise.resolve(4)
}).then(res => {console.log(res)
})Promise.resolve().then(() => {console.log(1);
}).then(() => {console.log(2);
}).then(() => {console.log(3);
}).then(() => {console.log(5);
}).then(() =>{console.log(6);
})
// 0,1,2,3,4,5,6

我们直观感觉到的

  • 大家会发现return Promise.resolve()慢了两拍

  • why(为什么呢?)
    虽然可能有个并没什么卵用的知识,但是很神奇,我来试着解释一下:

  • 还是以最上图片中代码为示例:

  • 假设async functin 返回的promise为p0,内部的Promise.resolve(),返回的为p1, 下面new Promise返回的为p2,p2.then返回的为p3;

进行解释

阶段一

1.执行async内部的Promise.resolve,得到p1,而p1上有可调用的then,则在微任务队列中放入一个任务:NewPromiseResolveThenableJob(promise0, p1, p1.then),

14.Let job be NewPromiseResolveThenableJob(promise, resolution, thenJobCallback).

Perform HostEnqueuePromiseJob(job.[[Job]], job.[[Realm]]).

此时p0的状态还是pending,它需要等待p1.then执行之后,也就是说,console.log(1)处于等待中。

2.new Promise同步执行了resolve(),返回p2,并执行then,p2是已解决的,那么往微任务队列中放入console.log(2);再执行then,但是因为console.log(2)的这个then回调还没有执行,因此console.log(3)所在的回调会等待

阶段一结束

此时微任务队列中有两条任务:NewPromiseResolveThenableJob(p0, p1, p1.then)和console.log(2);

阶段二

3.执行job:NewPromiseResolveThenableJob(p0, p1, p1.then),p1是fulfilled,执行p1.then,它的回调是resolve p0,此时往微任务队列增加一条任务 resolve p0。

另外,如果then不是异步的,比如这样:(async function(){ return {then:®=>{r()}};})().then(()=>{console.log(1)});)则在这一步就将p0 resolve掉,并将log(1)放入微任务队列,则只会慢1拍

4.执行console.log(2)
5.p3被resolved,将console.log(3)放入微任务队列

阶段二结束

此时微任务队列有两个任务,resolve p0和console.log(3)

后续阶段

6.执行resolve p0,console.log(1)被放入微任务队列

7.执行console.log(3)

8.执行console.log(1)

总结

如果promise内返回的对象具有可调用的then方法,则会在微任务队列中再插入一个任务NewPromiseResolveThenableJob,这就慢了一拍;这个任务会执行这个then方法,如果这个then方法是来自于promise的,则因为是异步的又慢了一拍,所以一共慢了两拍。

关于NewPromiseResolveThenableJob:

This Job uses the supplied thenable and its then method to resolve the
given promise. This process must take place as a Job to ensure that
the evaluation of the then method occurs after evaluation of any
surrounding code has completed.

具体的解释可以参考https://tc39.es/ecma262/#sec-promise-jobs
这个小嘟没有看懂,因为全是英文,所以说,读者还是要好好学习英语的!

你真的了解promise.resolve()吗相关推荐

  1. js实现promise.all promise.race promise.resolve

    最近在准备面试,关于 promise 是面试的热点和考点.不定面试官心情好了就会让你写个 promise 的 api 废话不多说,下面是我写的代码,如有不严谨之处希望指出. promise.all 当 ...

  2. es6 Promise.resolve()方法

    Promise.resolve()方法 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用. const jsPromise = Promise.resol ...

  3. Promise.resolve几种情况

    Promise.resolve等价于下面的写法 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用. Promise.resolve('foo') // 等 ...

  4. Promise构造函数的方法1:Promise.resolve()和Promsie.reject()

    1.promise.resolve() 它是成功状态的Promsie的一种简写方式. 参数传递:(以下重点掌握一般参数的传递): 1)一般参数和参数为空的情况下,直接返回一个resolved状态的Pr ...

  5. 你真的懂Promise吗

    前言 在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大.可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论Promise?事实上,有些朋友对于 ...

  6. js promise resolve()的用法

    Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成 ,又称Fulfilled)和 Rejected(已失败). resolve(data)将这个prom ...

  7. 前端js进阶之ES6 Promise(承诺)用法小结笔记、详细解释(resolve,catch,catch)历史最通俗易懂的承诺

    什么是Promise? 英文翻译:承诺! js里: Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all.reject.resolve这几个方法,原型上有then.catch ...

  8. 你真的了解JavaScript的Promise吗?

    什么是Promise Promise代理了一个可能要在未来才能到达的值[[PromiseValue]].Promise的一个最重要的特点是,你可以通过then来指定当[[PromiseValue]]到 ...

  9. cannot resolve symbol什么意思_JavaScript异步编程实现之一:Promise对象是什么?对resolve理解...

    问题:Promise对象是什么? Promise对象是ES6( ECMAScript 2015 )对于异步编程提供的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 传统回调: / ...

最新文章

  1. ntfs分区对linux的局限,如何使Linux支持NTFS分区
  2. javac环境变量配置(转)
  3. 准备入门IC的全局观念系列-上
  4. vue中怎么点击修改文字_Vue.js点击切换按钮改变内容
  5. .net学习榜样的博客
  6. java不需要返回数据时_从Java方法返回时,BigDecimal不保持实际值
  7. 今天讲座的感悟--java
  8. LeetCode()Minimum Window Substring 超时,但觉得很清晰。
  9. C++ tbb::atomic<bool> 声明、读取load、重新赋值store
  10. 使用matplotlib绘制K线图以及和成交量的组合图
  11. 模拟信号的数字处理方法
  12. 如何将PDF转换成xls格式的表格
  13. 算法练习——(10)小明的作业详解与分析(栈,数组,遍历,逻辑练习)
  14. 字符串后#号导致导出excel换行问题
  15. 物联网操作系统软件定时器
  16. 使用Nacos实现Spring Cloud Zuul的动态路由
  17. android 消息轮训,Android消息机制Handler,有必要再讲一次
  18. 【java毕业设计】基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现(毕业论文+程序源码)——村镇旅游网站
  19. 高并发高流量网站架构详解
  20. Kotlin学习(6)-类和对象之类成员介绍

热门文章

  1. Android 底部导航栏+页面切换
  2. Kali社会工程学套件入侵Windows
  3. Cacls Command Question
  4. Hexo+Buttterly+Github Pages构建个人博客
  5. JS人民币小写金额转换为大写(没毛病)
  6. Sharding-jdbc连接kingbasev8r6跨表分页
  7. oracle中的open,Oracle中常用SQL操作
  8. 基于ARM的微机原理-Cortex-M3处理器
  9. Android 10开启调试模式
  10. swoole 捕捉php错误,常见错误 - swoole - yoyo