当前位置 : 主页 > 网络编程 > JavaScript >

Node.js中的async 和 await 关键字微任务和宏任务

来源:互联网 收集:自由互联 发布时间:2023-02-08
目录 async 和 await 关键字 async 关键字 await关键字 async 和 await 解决回调地狱 JS执行机制(事件循环) 微任务和宏任务 宏任务 微任务 宏任务和微任务执行机制 async 和 await 关键字 async 和
目录
  • async 和 await 关键字
    • async 关键字
    • await关键字
    • async 和 await 解决回调地狱
  • JS执行机制(事件循环)
    • 微任务和宏任务
      • 宏任务
      • 微任务
      • 宏任务和微任务执行机制

    async 和 await 关键字

    async 和 await 是 ES2017 中提出来的,async 和 await 两个关键字的出现,简化的 Promise 的使用。

    async 关键字

    async关键字使用比较简单,所以 async 的使用注意以下三点即可 :

    • async 用于修饰一个 function
    • async 修饰的函数,总是返回一个 Promise 对象
    • 函数内的所有值,将自动包装在 resolved 的 promise 中
    // async 用于修饰一个 function
    //     1. async 修饰的函数,总是返回一个 Promise 对象
    //     2. 函数的返回值,将自动包装在 resolve 的 promise 中
    
    // 1. async 修饰的函数,总是返回一个 Promise 对象
    async function fn() {
        // 2. 函数的返回值,将自动包装在 resolve 的 promise 中
        return '哈哈哈';
    }
    // 以后看一下博客文章之类的东西,里面会有一些变量使用 :foo 和 bar , 无意义;
    const foo = fn();
    console.log(foo);
    foo.then(res => {
        console.log(res);
    });
    
    // 注意: async修饰的函数被称为异步函数,可他不是异步执行;
    console.log('我是最后一行代码');

    await关键字

    await关键字比较繁琐,注意点比较多。首先,await 只能出现在 async 函数内,await 让 JS 引擎等待直到promise完成并返回结果,语法:

    let value = await promise对象; // 等待promise对象的结果,然后将结果赋值给 value

    由于await需要等待promise执行完毕,所以 await会 暂停函数的执行,但不会影响其他同步任务。

    所以,await总结如下四点:

    • await只能出现在异步函数中!
    • await能停止代码执行,让后面的同步代码,先执行;
    • await后面跟随的是一个promise对象;
    • await返回的是: Promise对象中的then()中的回调函数中的参数res;
    // 定义一个方法,为的就是返回一个 Promise 对象,让下面的await使用;
    async function getPromise() {
        return '哈哈哈';
    }
    console.log(1);
    // 1.await只能出现在async修饰的函数中!
    async function fn() {
        console.log(2);
        // 2.await后面跟随的是一个promise对象;
        // 3.await返回的是: Promise对象中的then()中的回调函数中的参数res;
        const str = await getPromise();
        console.log(str);
        // 4.await能停止代码执行,让后面的同步代码,先执行;
        console.log(3);
    }
    // 调用
    fn();
    console.log(4);
    // // 以前用法: 
    // axios().then(res => {
    //     res.data.map()
    // });
    // // 以后用法: 
    // async function name() {
    //     let res = await axios();
    //     res.data.map();
    // }

    async 和 await 解决回调地狱

    // async 和 await 解决回调地狱也要用到 then-fs ,因为他直接返回 Promise 对象;
    ​
    // 导入 then-fs
    import thenFs from 'then-fs';
    ​
    // await 一定要出现在异步函数中
    async function fn() {
        let str1 = await thenFs.readFile('./txt/a.txt', 'utf8');
        console.log(str1);
        let str2 = await thenFs.readFile('./txt/b.txt', 'utf8');
        console.log(str2);
        let str3 = await thenFs.readFile('./txt/c.txt', 'utf8');
        console.log(str3);
    }
    ​
    // 调用函数
    fn();

    JS执行机制(事件循环)

    • js代码开始执行后,主线程执行栈中会把任务分为两类.
    • 一类是同步任务, 一类是异步任务; 主线程执行栈优先执行同步任务,
    • 异步任务会被放入特定的处理程序中,满足条件后,被放到消息(任务/事件)队列中,
    • 主线程执行栈中所有的同步任务执行完毕之后,通过事件循环去消息(任务/事件)队列中,
    • 挑选优先满足条件的程序,放入主线程执行栈中执行。事件循环,周而复始,一直执行。

    微任务和宏任务

    在ES3 以及以前的版本中,JavaScript本身没有发起异步请求的能力,也就没有微任务的存在。在ES5之后,JavaScript引入了Promise,这样,不需要浏览器,JavaScript引擎自身也能够发起异步任务了。 ​ Tick会触发浏览器渲染,Promise不会触发,所以更加轻量级,多使用;

    宏任务

    (macro)task,可以理解是每次执行栈执行的代码就是一个宏任务

    • 主线程上的执行栈中所有的代码块
    • setTimeout
    • setInterval
    • Ajax
    • 事件

    微任务

    微任务(microtask)是宏任务中的一个部分,它的执行时机是在同步代码执行之后,下一个宏任务执行之前。

    总结起来,微任务有:

    • Promise.then
    • process.nextTick(Node.js 环境)

    宏任务和微任务执行机制

    JS优先执行同步任务,然后执行微任务,最后执行宏任务。

    总结:Promise中的then()比大部分异步代码,优先执行!

    // 结论: 如果同一时间既有宏任务又有微任务触发,那么优先执行微任务;
    //     宏任务是宿主发起的会触发重构,比较浪费资源,后执行;
    //     微任务是js解释器发起的不会触发重构,比较节省资源,先执行;
    // 宏任务
    setTimeout(() => {
        //执行后 回调一个宏事件
        console.log('1')
    }, 0)
    // 同步代码
    console.log('2');
    // 同步代码
    new Promise((resolve) => {
        console.log('3');
        resolve()
    // 微任务
    }).then(() => {
        console.log('4');
    // 微任务
    }).then(()=>{
        console.log('5')
    })
    // 同步代码
    console.log('6')
    // 2  3   6   4   5   1

    到此这篇关于Node.js中的async 和 await 关键字微任务和宏任务的文章就介绍到这了,更多相关Node.js async 和 await 内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络!

    网友评论