你真的了解promise.resolve()吗
原文链接在这里: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()吗相关推荐
- js实现promise.all promise.race promise.resolve
最近在准备面试,关于 promise 是面试的热点和考点.不定面试官心情好了就会让你写个 promise 的 api 废话不多说,下面是我写的代码,如有不严谨之处希望指出. promise.all 当 ...
- es6 Promise.resolve()方法
Promise.resolve()方法 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用. const jsPromise = Promise.resol ...
- Promise.resolve几种情况
Promise.resolve等价于下面的写法 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用. Promise.resolve('foo') // 等 ...
- Promise构造函数的方法1:Promise.resolve()和Promsie.reject()
1.promise.resolve() 它是成功状态的Promsie的一种简写方式. 参数传递:(以下重点掌握一般参数的传递): 1)一般参数和参数为空的情况下,直接返回一个resolved状态的Pr ...
- 你真的懂Promise吗
前言 在异步编程中,Promise 扮演了举足轻重的角色,比传统的解决方案(回调函数和事件)更合理和更强大.可能有些小伙伴会有这样的疑问:2020年了,怎么还在谈论Promise?事实上,有些朋友对于 ...
- js promise resolve()的用法
Promise对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成 ,又称Fulfilled)和 Rejected(已失败). resolve(data)将这个prom ...
- 前端js进阶之ES6 Promise(承诺)用法小结笔记、详细解释(resolve,catch,catch)历史最通俗易懂的承诺
什么是Promise? 英文翻译:承诺! js里: Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all.reject.resolve这几个方法,原型上有then.catch ...
- 你真的了解JavaScript的Promise吗?
什么是Promise Promise代理了一个可能要在未来才能到达的值[[PromiseValue]].Promise的一个最重要的特点是,你可以通过then来指定当[[PromiseValue]]到 ...
- cannot resolve symbol什么意思_JavaScript异步编程实现之一:Promise对象是什么?对resolve理解...
问题:Promise对象是什么? Promise对象是ES6( ECMAScript 2015 )对于异步编程提供的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大. 传统回调: / ...
最新文章
- ntfs分区对linux的局限,如何使Linux支持NTFS分区
- javac环境变量配置(转)
- 准备入门IC的全局观念系列-上
- vue中怎么点击修改文字_Vue.js点击切换按钮改变内容
- .net学习榜样的博客
- java不需要返回数据时_从Java方法返回时,BigDecimal不保持实际值
- 今天讲座的感悟--java
- LeetCode()Minimum Window Substring 超时,但觉得很清晰。
- C++ tbb::atomic<bool> 声明、读取load、重新赋值store
- 使用matplotlib绘制K线图以及和成交量的组合图
- 模拟信号的数字处理方法
- 如何将PDF转换成xls格式的表格
- 算法练习——(10)小明的作业详解与分析(栈,数组,遍历,逻辑练习)
- 字符串后#号导致导出excel换行问题
- 物联网操作系统软件定时器
- 使用Nacos实现Spring Cloud Zuul的动态路由
- android 消息轮训,Android消息机制Handler,有必要再讲一次
- 【java毕业设计】基于javaEE+原生Servlet+MySql的村镇旅游网站设计与实现(毕业论文+程序源码)——村镇旅游网站
- 高并发高流量网站架构详解
- Kotlin学习(6)-类和对象之类成员介绍