setTimeout,promise,promise.then, async,await执行顺序问题
今天下午看了好多关于这些执行顺序的问题 经过自己的实践 终于理解了 记录一下
就拿网上出现频繁的代码来说:
async function async1() {
console.log('async1 start');
await async2();
console.log('asnyc1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(() => {
console.log('setTimeOut');
}, 0);
async1();
new Promise(function (reslove) {
console.log('promise1');
reslove();
}).then(function () {
console.log('promise2');
})
console.log('script end');
然后是结果:
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
理解:
js事件分两种: 宏任务(macro task) 和 微任务(micro task)
宏任务包括: script(读取 执行script代码也算一种任务) setTimeout setInterval
微任务包括:promise.then(注意是promise.then) , process.nextTick
事件执行顺序: 先执行宏任务, 然后执行微任务
任务执行顺序:先执行同步代码,后执行异步代码
上述代码的同步代码有哪些呢:
console.log('script start');
async1();
console.log('async1 start');
console.log('async2');
console.log('promise1');
console.log('script end');
值得注意的是
1. async声明的函数
如果没有await 跟普通函数一样
如果存在await await之前的代码包括await紧跟的这个函数都是同步执行的
await执行async2这个函数之后await让出了线程,把返回的promise加入了微任务异步队列,所以async1()下面的代码也要等待上面完成后继续执行;
(自己理解:
上述代码中 由于在执行async2之前 还没有执行new Promise 所以不会把promise.then这个微任务添加到异步队列中
善于动手的小伙伴可以试着 把 new Promise那段代码放到async1();之前 会返现执行顺序不一样
)
2. new Promise()是声明就立即执行的, promise.then才是异步;
然后是异步代码:
promise.then
setTimeout
以上是自己的实践➕理解 如有不对 请大神纠正
async function async1(){
console.log('a1 start');
await async2();
console.log('a1 end');
}
async function async2(){
console.log('async2');
}
new Promise((resolve) => {
console.log('promise1');
resolve();
}).then(() => {
console.log('promise1 then');
});
async1();
new Promise((resolve) => {
console.log('promise2');
resolve();
}).then(() => {
console.log('promise2 then');
});
执行这段代码 你会发现 promise.then 和 await之间的微妙关系
setTimeout,promise,promise.then, async,await执行顺序问题的更多相关文章
- Promise嵌套问题/async await执行顺序
/* 原则: 执行完当前promise, 会把紧挨着的then放入microtask队尾, 链后面的第二个then暂不处理分析, */ 一. new Promise((resolve, reject) ...
- async/await 执行顺序详解
随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...
- 错误的理解引起的bug async await 执行顺序
今天有幸好碰到一个bug,让我知道了之前我对await async 的理解有点偏差. 错误的理解 之前我一直以为 await 后面的表达式,如果是直接返回一个具体的值就不会等待,而是继续执行asyn ...
- 事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)
什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...
- promise.then, setTimeout,await执行顺序问题
promise.then VS setTimeout 在chrome和node环境环境中均输出2, 3, 1, 先输出2没什么好说的,3和1顺序让人有些意外 原因: 有一个事件循环,但是任务队列可以有 ...
- javascript ES6 新特性之 Promise,ES7 async / await
es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...
- async和await执行顺序
关于执行顺序和线程ID,写了一个小程序来检测学习: using System; using System.Net; using System.Threading; using System.Threa ...
- promise async await使用
1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...
- JS中的async/await的执行顺序详解
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉 ...
随机推荐
- 有关IP和子网掩码的总结
从之前写的那个概括的文章之后,具体细节知识我也不知道写啥子,最近忙于毕业论文和考证,所以就总结一下这方面的知识,本篇的话就先从IP说起. IP这方面有IPv4和IPv6这两方面的内容,这里就只说IPv ...
- 利用elasticsearch-dump实现es索引数据迁移附脚本
1.安装环境 CentOS Linux release 7.5.1804 (Core) 1 2.安装nodejs yum install -y nodejs 1 3.验证nodejs [root@lo ...
- private关键字 this关键字
基本类型的布尔值boolean定义get方法,名称应该为isMale 当方法的局部变量和类的成员变量重名的时候,根据就近原则,有限使用局部变量, 如果需要访问成员变量 则使用this.name 构造 ...
- [转帖] 飞腾FT2000+ CPU的进展(2019.6)
中国长城:拟进一步收购飞腾股权,强化信息基础设施国产化平台地位 2019-06-26 09:28 http://www.sohu.com/a/323065095_100016383 今年年中的事情 浪 ...
- 【转载】java8 自定义TemporalAdjuster
有的时候,你需要进行一些更加复杂的操作,比如,将日期调整到下个周日.下个工作日,或者是本月的最后一天.这时,你可以使用重载版本的with方法,向其传递一个提供了更多定制化选择的TemporalAdju ...
- 【转载】在一台电脑上运行两个或两个以上的tomcat
作者注: 本片为转载文章,一台电脑运行两个及以上tomcat的原因是:第一个eclipse版本是4.5,最高支持tomcat8.0版本,并且这个版本的eclipse通过svn提交和更新项目极其缓慢,无 ...
- C标准库常用函数概要
stdio.h printf()/fprintf() printf的返回值是打印的字符数, 发生错误则返回负数 scanf()/fscanf() scanf的返回值是成功赋值的变量个数, 失败则返回E ...
- Photon Server初识(五) --- 客户端连接服务端
准备:Unity开开发IDE. 一.新建Unity3D项目 导入包,在资源下新建目录 Plugins .在之前解压的SDK目录 lib中找到 Photon3Unity3D.dll,拖到新建的目前下 二 ...
- vue的基本语法
在学习vue之前,我们应了解一下什么是vue.js? 什么是Vue.js? Vue.js是目前最后一个前端框架,React是最流行的一个前端框架(react除了开发网站,还可以开发手机App,Vue语 ...
- 笔记-2:python基本数据类型
1.数字类型 1.1 整数类型 整数类型有4种进制表示:十进制,二进制,八进制,十六进制,默认情况下,整数采用十进制. 整数类型有4种进制:十进制. 二进制. 八进制和十六进制. 默认情况, 整数采用 ...