zoukankan      html  css  js  c++  java
  • js执行顺序,Promise和async中的立即执行

    1. js是单线程的,自上而下顺序执行

    2. 宏任务 微任务

    js里有 seTimeout,setInterval,dom事件,ajax,Promise,process.nextTick(node.js才有的)等函数

    Promise和async中的立即执行
    我们知道Promise中的异步体现在then和catch中,所以写在Promise中的代码是被当做同步任务立即执行的。而在async/await中,在出现await出现之前,其中的代码也是立即执行的。那么出现了await时候发生了什么呢?

    await做了什么
    从字面意思上看await就是等待,await 等待的是一个表达式,这个表达式的返回值可以是一个promise对象也可以是其他值。

    很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码,实际上await是一个让出线程的标志。await后面的表达式会先执行一遍,将await后面的代码加入到microtask中,然后就会跳出整个async函数来执行后面的代码。
    由于因为async await 本身就是promise+generator的语法糖。所以await后面的代码是microtask

    Promise.resolve() 和 Promise.reject() 是手动创建一个已经 resolve 或者 reject 的 Promise 快捷方法。它们有时很有用。

    Promise.all() 和 Promise.race() 是并行运行异步操作的两个组合式工具。


    promise 官方详解在这里

    执行顺序详解在大佬这里

    几个练习:

    function test() {
    
    console.log('a')
    
    setTimeout(()=>{
        console.log('b')
    })
    
    new Promise((resolve, reject)=> {
    console.log('c')
    })
    
    console.log('d')
    
    }
    test()
    
    // 打印顺序是:a c d b
    function test() {
    
    console.log('a')
    
    setTimeout(()=>{
        console.log('b')
    })
    
    new Promise((resolve, reject)=> {
        console.log('c')
        resolve()
    }).then(()=>{
        console.log('e')
    }).catch(()=>{
        console.log('f')
    })
    
    console.log('d')
    
    }
    test()
    
    // 打印顺序是:a  c  d  e  b
    function test() {
    
    console.log('a')
    
    setTimeout(()=>{
        console.log('b')
    })
    
    new Promise((resolve, reject)=> {
        console.log('c')
        resolve()
    }).then(()=>{
        console.log('e')
        throw('err')
    }).catch(()=>{
        console.log('f')
    })
    
    console.log('d')
    
    }
    test()
    
    // 打印顺序是:a  c  d  e  f b

     

    .

  • 相关阅读:
    QT4.8.7和VS2010环境搭建及使用
    SQL Server--获取磁盘空间使用情况
    SQL SERVER--DBA 常用到的一些脚本
    MySQL--REPLACE INTO与自增
    MySQL--更新自增列的潜在风险
    MySQL--Skip GTID CAP
    MySQL--MHA与GTID
    MySQL--自增列学习
    MySQL--MHA原理
    MySQL--BNL/ICP/MRR/BKA
  • 原文地址:https://www.cnblogs.com/xiangsj/p/14551913.html
Copyright © 2011-2022 走看看