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

  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执行顺序问题的更多相关文章

  1. Promise嵌套问题/async await执行顺序

    /* 原则: 执行完当前promise, 会把紧挨着的then放入microtask队尾, 链后面的第二个then暂不处理分析, */ 一. new Promise((resolve, reject) ...

  2. async/await 执行顺序详解

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

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

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

  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. javascript ES6 新特性之 Promise,ES7 async / await

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

  7. async和await执行顺序

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

  8. promise async await使用

    1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...

  9. JS中的async/await的执行顺序详解

    虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉 ...

随机推荐

  1. 《Java语言程序设计》

    课堂测试:用户需求:英语的26 个字母的频率在一本小说中是如何分布的?某类型文章中常出现的单词是什么?某作家最常用的词汇是什么?<Harry Potter> 中最常用的短语是什么,等等. ...

  2. vue8种通信方式

    参考:https://juejin.im/post/5d267dcdf265da1b957081a3#heading-1(写的很详细)    https://blog.csdn.net/songxiu ...

  3. 数字麦克风PDM转PCM与STM32 I2S接口应用----重要文档列表

    数字麦克风PDM脉冲到PCM信号需要一个二次采样,ST 提过了PDM2PCM的软件包,可以完成上面的工作.软件包源码没有开源,使用手册也简洁的让人抓狂,我觉得可能是因为ST更高级的MCU直接带了硬解码 ...

  4. [转帖]yaml语言格式

    yaml语言格式 YAML是"YAML Ain't a Markup Language"(YAML不是一种标记语言),强调这种语言以数据做为中心,而不是以置标语言为重点. 转载2篇 ...

  5. LeetCode 第 165 场周赛

    LeetCode 第 165 场周赛 5275. 找出井字棋的获胜者 5276. 不浪费原料的汉堡制作方案 5277. 统计全为 1 的正方形子矩阵 5278. 分割回文串 III C 暴力做的,只能 ...

  6. 小米Python后端面试题

    电话面 时长:30m 说一下对浏览器缓存的理解: 说一下MySQL优化: 说一下redis: 说一下从输入url到返回都发生了什么: 域名怎么解析的: 一面 1h 编程实现翻转单链表: MySQL中v ...

  7. 设置springmvc全局异常

    设置全局异常,将异常信息指定内容展示给前端页面,保证程序的安全性 @Slf4j@Componentpublic class ExceptionResolver implements HandlerEx ...

  8. 网络流+最小生成树的最少割边数--How Many to Be Happy?

    题意:https://blog.csdn.net/Ratina/article/details/95200594 思路: 首先我们知道最小生成树就是按长度枚举边,能连就连. 那么,如果这条边在最小生成 ...

  9. 14.shell脚本学习

    简单的执行跟踪,会使得Shell显示每个被执行到的命令sh -x delete.sh 查找与替换grepsed -i "s/t_rs_customer/t_rs_customer_bak/g ...

  10. java 内部类、匿名内部类

    一:内部类 1:什么是内部类? 大部分时候,类被定义成一个独立的程序单元.在某些情况下,也会把一个类放在另一个类的内部定义,这个定义在其他类内部的类就被称为内部类(有些地方也叫做嵌套类),包含内部类的 ...