• JavaScript中async和await的使用以及队列问题


    宏任务和微任务的队列入门知识,可以参考之前的文章:

    宏任务和微任务在前端面试中,被经常提及到,包括口头和笔试题

    async && await概念

    async

    • 使用async关键字声明的函数,是AsyncFunction构造函数的实例,在async函数体内,可以使用await接收promise实例
    • async和await关键字,在开发过程中,可以简洁地去做一些异步操作。

    await

    • await操作符接受一个Promise 对象,并且只能和异步函数async function搭配使用。
    • await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。
    • 若 Promise 正常处理 (fulfilled),其回调的 resolve 函数参数作为 await 表达式的值,继续执行
    • 若 Promise 处理异常 (rejected),await 表达式会把 Promise 的异常原因抛出。
    • 如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。

    async && await基本使用

    
    /**
     * async 函数是使用async关键字声明的函数。
     * async 函数是AsyncFunction构造函数的实例, 并且其中允许使用await关键字。
     * async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。
     *
     * await  操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
     * await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。若 Promise 正常处理 (fulfilled),其回调的 resolve 函数参数作为 await 表达式的值,继续执行
     * async function。
     * 若 Promise 处理异常 (rejected),await 表达式会把 Promise 的异常原因抛出。
     * 另外,如果 await 操作符后的表达式的值不是一个 Promise,则返回该值本身。
     *
     *
     * */
    
    // 模拟请求接口
    function userInfo() {
    	return new Promise((resolve) => {
    		setTimeout(() => {
    			resolve("zhangsan");
    		}, 2000);
    	});
    }
    
    // 接收请求的返回值
    async function fetchUserInfo() {
    	let res = await userInfo();
    	console.log(res);
    }
    fetchUserInfo(); // zhangsan
    
    // 不是异步promise
    let testFn = function test(){}
    async function notPromise() {
    	var str = await testFn;
    	console.log(str); // function test(){}
    }
    notPromise();
    
    

    async&& await结合promise在面试时回遇到的队列问题

    
    function userInfo() {
    	return new Promise((resolve) => {
    		setTimeout(() => {
    			resolve(`接口返回值---------------1`);
    		}, 2000);
    	});
    }
    
    
    
    
    console.log("1");
    let p1 = new Promise((resolve, reject) => {
    	resolve("p1");
    });
    let p2 = new Promise((resolve, reject) => {
    	resolve("p2");
    });
    async function getUserInfo() {
        console.log("2");
        
        p1.then((res) => {
        	console.log(res);
        });
        
        
        var awaitRes = await userInfo();
        console.log(awaitRes); // 接口返回值---------------1
        
        p2.then((res) => {
        	console.log(res);
        });
        
        console.log("3");
    }
    
    
    console.log("4");
    getUserInfo(); // 异步方法,加入任务队列执行
    console.log("5");
    
    /**
     *
     * 执行顺序
     *
     * 1
     * 4
     * 2
     * 5
     * p1
     * 接口返回值---------------1
     * 3
     * p2
     *
     *
     * */
     
    
    • 同步任务1,4,执行
    • getUserInfo作为异步方法,优先执行同步代码2
    • p1和userInfo方法,p2这三个作为promise会放在异步队列当中,并且await后面的代码会阻塞后续的代码执行,因此3也会作为异步任务,放在await之后执行
    • 此时,会先执行5
    • 所有的同步代码执行完成之后,从队列中,执行异步任务,p1,awaitRes---->接口返回值---------------1
    • 到这里值得注意的是,由于await会阻塞同步代码的执行,因此await执行完成之后,会先执行在它之后阻塞的同步代码,执行完成之后,才会执行p2这个promise异步任务

    所以整个代码块执行的顺序是:

    1,4,2,5,p1,接口返回值---------------1,3,p2

    总结:

    • async和await作为ecmascript的新特性,目前更多的场景使用在前端获取后端接口和进行一些异步操作等。
    • 作为面试点,async和await,结合promise和定时器等结合起来,作为一些面试的必备知识。
    • 宏任务和微任务的队列入门知识,可以参考之前的文章:
    • JavaScript的事件循环机制
    • 详细的async和await的使用,可以参考:
    • 阮一峰ES6 async 函数

    以上就是js中async和await简单解析以及在面试中可能会问到的关于队列的一些场景和知识点,有任何问题欢迎留言,后续的文章整理然后作为补充。

    文章博客地址:JavaScript中async和await的使用以及队列问题

    源码地址

    欢迎关注公众号:程序员布欧,不定期更新一些文章

    创作不易,转载请注明出处和作者。

  • 相关阅读:
    C和指针 第11章 动态内存分配 11.10 问题
    O(n)RMQ四毛子
    【Django】Django REST Framework接口实现详解:从APIView到ModelViewSet
    深度学习之基于yolo的体育运动项目姿态估计识别计数系统
    AI绘画逆着玩火了,敢不敢发自拍看AI如何用文字形容你?
    贴片天线的特征模分析及其应用
    CDH 03MySQL5.7安装配置(markdown新版)
    记录一次阿里云ECS服务器系统盘扩容
    在Android 上开发一个显示系统属性的APK应用
    ASP.NET Core 6框架揭秘实例演示[07]:文件系统
  • 原文地址:https://www.cnblogs.com/akari16/p/16415210.html