/*
原则:
执行完当前promise,
会把紧挨着的then放入microtask队尾,
链后面的第二个then暂不处理分析,
*/
一、
new Promise((resolve, reject) => {
  console.log("promise1")
  resolve()
}).then( () => {
  console.log("then11")
  new Promise((resolve, reject) => {
  console.log("promise2")
  resolve()
  }).then(() => {
  console.log("then21")
  }).then(() => {
    console.log("then23")
    })
}).then(() => {
console.log("then12")
})
1.先执行同步部分代码输出 "promise1"
2.第一个then执行, 产生了promise对象, 放到microtask里(第二个then必须要等要第一个then产生的promise同步部分执行完才能放到队列里)
3.then方法构建了一个promise, 同步代码中输出 then11
4.then方法里又新建了promise 执行同步部分 输出promise2, 把第一个then放到microtask里, 把外面的then放到microtask里
5.取出microtask, 输出then21,然后里面第二个then进入microtask, 输出then12
6.输出then23
二、
new Promise((resolve, reject) => {
  console.log("promise1")
  resolve()
}).then(() => {
  console.log("then11")
  new Promise((resolve, reject) => {
  console.log("promise2")
  resolve()
  }).then(() => {
  console.log("then21")
  }).then(() => {
  console.log("then23")
  })
}).then(() => {
console.log("then12")
})
 
new Promise((resolve, reject) => {
console.log("promise3")
resolve()
}).then(() => {
console.log("then31")
})
 
1.执行外层Promise同步代码
输出promise1 第一个then进入microtask队列,第二个then不进入(因为这个要等第一个then产生的promise初始化完)
2.输出promise3,最下面的then进队列
此时队列中
----出口方向--->
[then31],[then1]
3.执行then1 输出了then11 构造了一个新的promise,执行同步代码promise2 then21进入队列,then12进入队列
---出口方向-->
[then12],[then21],[then31]
4.输出then31,then21,此时最后一个then,then23进入队列
---出口方向->
[then23],[then12],[then21]
输出 then21, then12, then23
三、
async/await
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log( 'async2');
}
console.log("script start");
setTimeout(function () {
console.log("settimeout");
},0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log('script end');
//script start,async1 start,async2,promise1,script end,async1 end,promise2,settimeout
// 处理这种问题的方法:await后面跟的是一个promise对象。如果await函数,那么这个函数里的部分就应该同步执行,
// await下面的语句相当于promise.then里面的语句。

Promise嵌套问题/async await执行顺序的更多相关文章

  1. async/await 执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...

  2. 错误的理解引起的bug async await 执行顺序

    今天有幸好碰到一个bug,让我知道了之前我对await async 的理解有点偏差. 错误的理解 之前我一直以为  await 后面的表达式,如果是直接返回一个具体的值就不会等待,而是继续执行asyn ...

  3. setTimeout,promise,promise.then, async,await执行顺序问题

    今天下午看了好多关于这些执行顺序的问题  经过自己的实践 终于理解了  记录一下就拿网上出现频繁的代码来说: async function async1() { console.log('async1 ...

  4. 事件循环 EventLoop(Promise,setTimeOut,async/await执行顺序)

    什么是事件循环?想要了解什么是事件循环就要从js的工作原理开始说起: JS主要的特点就是单线程,所谓单线程就是进程中只有一个线程在运行. 为什么JS是单线程的而不是多线程的呢? JS的主要用途就是与用 ...

  5. promise.then, setTimeout,await执行顺序问题

    promise.then VS setTimeout 在chrome和node环境环境中均输出2, 3, 1, 先输出2没什么好说的,3和1顺序让人有些意外 原因: 有一个事件循环,但是任务队列可以有 ...

  6. async和await执行顺序

    关于执行顺序和线程ID,写了一个小程序来检测学习: using System; using System.Net; using System.Threading; using System.Threa ...

  7. javascript ES6 新特性之 Promise,ES7 async / await

    es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...

  8. JS中For循环中嵌套setTimeout()方法的执行顺序

    在For循环中执行setTimeOut()方法的代码,执行顺序是怎样的呢? 代码如下 function time() { for(var i= 0;i<5;i++){ setTimeout(fu ...

  9. AngularJS指令嵌套时link函数执行顺序的问题

    今天研究指令嵌套时,发现子指令的link函数先于父指令的link函数执行. 这样和预想的顺序不一样. 也就是说,如果子指令的某个scope变量依赖于父指令传来的参数时,可能一直是undefinded比 ...

随机推荐

  1. 从es中提取全量数据的shell脚本

    [root@hadoop3 xiaole_chk_url]# sh looh.es.res.sh 100 200 1 % Total % Received % Xferd Average Speed ...

  2. VCL源码修改立即生效

    为了深刻学习Delphi的VCL源码,要使的它立刻修改生效.网上很多办法,这招最简单最管用: 把source\vcl路径添加进来,只要有修改vcl源程序,都会重新编译.但是对RTL源码不能这样做. - ...

  3. centos上装eclipse步骤

    1.去官网下个eclipse for linux的  地址:http://www.eclipse.org/downloads/    Eclipse IDE for Java EE Developer ...

  4. jQuery的jsop,jsonp跨域请求

    https://www.cnblogs.com/chiangchou/p/jsonp.html

  5. codevs1557 热浪(堆优化dijkstra)

    1557 热浪  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 德克萨斯纯朴的民眾们这个夏 ...

  6. max_allowed_packet设置问题

    最近在运行的项目出现了一个线上事故,有人反映商城的东西下不了单了,到后台看了一下,果然报了一个错 Cause: com.mysql.jdbc.PacketTooBigException: Packet ...

  7. 什么是JavaScript的原始值?

    JavaScript的原始值是指数字.字符串.布尔值.null和undefined. JavaScript的数据类型分为两类:原始类型(primitive type)和对象类型(object type ...

  8. HDU2564 词组缩写

    2019-06-03 15:00:38 感觉有有种被坑了的感觉,这道题不难,就是一再的W,

  9. myeclipse配置tomcat后,无法正常使用的问题

    如图所示:一定要设置为Enable.否则部署tomcat时,没有tomcat8.0

  10. WIN 10家庭版没有Hyper-V

    新建文件Hyper-V.cmd 内容如下 pushd "%~dp0"dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum > ...