/*
原则:
执行完当前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. 将一个对象相同的属性(不区分大小写)赋值给一个新对象 DataTable的一个简单的扩展

    将一个对象相同的属性(不区分大小写)赋值给一个新对象   1 public static T Mapper<S, T>(S source) 2 { 3 T t = Activator.Cr ...

  2. Android横竖屏切换不重新调用onCreate()

    再次感叹Android的碎片化!!!! 设置AndroidManifest.xml中Activity的android:configChanges=”keyboardHidden|orientation ...

  3. abstract (C# Reference)

    https://msdn.microsoft.com/en-us/library/sf985hc5.aspx The abstract modifier indicates that the thin ...

  4. 【POJ 3190】 Stall Reservations

    [题目链接] http://poj.org/problem?id=3190 [算法] 将这些牛按开始吃草的时间排序 维护一个数组S,Si表示畜栏i进去的最后一头牛结束吃草的时间,对于每头牛,找任意一个 ...

  5. 设计模式 |备忘录模式(memento)

    定义: 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将该对象恢复到原先保存的状态. 结构:(书中图,侵删) Originator:需要备份的类(写在便签上 ...

  6. Django基于JWT实现微信小程序的登录和鉴权

    什么是JWT? JWT,全称Json Web Token,用于作为JSON对象在各方之间安全地传输信息.该信息可以被验证和信任,因为它是数字签名的. 与Session的区别 一.Session是在服务 ...

  7. Android数据存储的5种方法

    --使用SharedPreferences存储数据 --文件存储数据 --SQLite数据库存储数据 --使用ContentProvider存储数据 --网络存储数据 Preference,File, ...

  8. html表单——使用frameset写一个导航栏效果

    主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  9. IIS 配置 SVC

    IIS8中添加WCF支持几种方法小结[图文] 方法一 最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不 ...

  10. Winform中Treeview控件失去焦点,将选择的节点设置为高亮显示 (2012-07-16 13:47:07)转载▼

    Winform中Treeview控件失去焦点,将选择的节点设置为高亮显示 (2012-07-16 13:47:07)转载▼标签: winform treeview drawnode Treeview控 ...