/*
原则:
执行完当前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. 改善java程序的151个建议--数组和集合

    60.性能考虑,数组是首选,在基本类型处理方面.数组还是占优势的,并且集合类的底层也都是通过数组实现.建议在性能要求较高的场景中使用数组替代集合. 61.假设有必要.使用变长数组:我们能够通过对数组扩 ...

  2. error: &#39;Can&#39;t connect to local MySQL server through socket &#39;/var/lib/mysql/mysql.sock&#39; (2)&#39;

    [root@luozhonghua ~]#   /usr/bin/mysqladmin -u root password 'aaaaaa' /usr/bin/mysqladmin: connect t ...

  3. Rails 拉数据初始数据库

    rails c   [1] pry(main)> Scraping.exec

  4. phpci发送邮件

    $config['protocol']='smtp'; $config['smtp_host']='smtp.163.com';//163服务器,之前用了qq服务器死活发不出去,不知道什么原因,可以自 ...

  5. php的类型转换

    转自:http://www.tianzhigang.com/article.asp?id=280 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: (int).(integer):转换成 ...

  6. [App Store Connect帮助]三、管理 App 和版本(2.3)输入 App 信息:提供自定许可协议

    Apple 提供了适用于所有地区的标准 EULA(最终用户许可协议).如果您不提供自定许可协议,则您的 App 会应用标准 Apple EULA,且该许可协议链接不会显示在您的 App Store 产 ...

  7. Akka源码分析-Persistence

    在学习akka过程中,我们了解了它的监督机制,会发现actor非常可靠,可以自动的恢复.但akka框架只会简单的创建新的actor,然后调用对应的生命周期函数,如果actor有状态需要回复,我们需要h ...

  8. 【Leetcode 166】 Fraction to Recurring Decimal

    Description: Given two integers representing the numerator and denominator of a fraction, return the ...

  9. Laravel5.1学习笔记13 系统架构5 Contract

    Contract 简介 为什么要用 Contract? Contract 参考 如何使用 Contract 简介 Laravel 中的 Contract 是一组定义了框架核心服务的接口.例如,Illu ...

  10. Java—将文件夹压缩为zip文件

    import java.io.BufferedInputStream; import java.io.File; import java.io.FileInputStream; import java ...