“约见”面试官系列之常见面试题第三十二篇之async和await（建议收藏）

最新推荐文章于 2024-06-24 22:03:30 发布
最新推荐文章于 2024-06-24 22:03:30 发布
阅读量1.7k 收藏 25
点赞数 37
原文链接：https://blog.csdn.net/weixin_42614080/article/details/93332801
版权

一、async和await

  1. async和await的概念

1）async 函数是 Generator 函数的语法糖，使用 关键字 async 来表示，在函数内部使用 await 来表示异步
2）ES7 提出的async 函数，终于让 JavaScript 对于异步操作有了终极解决方案
3）async 作为一个关键字放到函数的前面，用于表示函数是一个异步函数，该函数的执行不会阻塞后面代码的执行
4）await是等待，只能放到async函数里面，在后面放一个返回promise对象的表达式
5）async和await是为了解决大量复杂不易读的Promise异步的问题

  1. async函数的改进

1）内置执行器，Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
2）更好的语义，async 和 await 相较于 * 和 yield 更加语义化
3）更广的适用性，co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象，而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）
4）返回值是 Promise，async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用
5）async方式，流程清晰，直观、语义明显，操作异步流程就如同操作同步流程， async 函数自带执行器，执行的时候无需手动加载。对于Promise的方式，如果处理流程复杂，整段代码将会充满then，不然很好的表示流程。对于Generator 方式，函数的执行需要依靠执行器，每次都需要通过 g.next() 的方式去执行

  1. async和await的实例

1）async 作为一个关键字放到函数的前面，用于表示函数是一个异步函数，该函数的执行不会阻塞后面代码的执行
实例代码：

	async function timeout(){
        return "hello word";
    }

   timeout();
    //  Promise   __proto__: Promise  [[PromiseStatus]]: "resolved"   [[PromiseValue]]: "hello word"
    //async返回的是 promise 对象
    console.log(timeout());
    // 我在后面，但是我是先执行的
   console.log("我在后面，但是我是先执行的");

2）async声明的函数的返回本质上是一个Promise，async函数内部会返回一个Promise对象，then方法回调函数的参数
实例代码：

    //  hello world11
    async function f1(){
        return "hello world11";
    };
    f1().then((v)=>console.log(v));

3）await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，用await声明的Promise异步返回，必须“等待”到有返回值的时候，代码才继续执行下去
实例代码：

	/*  hello1
    我是hello2
    输出 hello1*/

    const test = async()=>{
        let message = "hello1";
        let result = await message;
        console.log(result);
        console.log("我是hello2");
        return result;
    };
    test().then(result =>{
        console.log("输出",result);
    });

4）async 函数内部的实现原理是resolved，如果函数内部抛出错误， 则会导致返回的 Promise 对象状态变为 reject 状态，promise 对象有一个catch 方法进行捕获，被 catch 方法回调函数接收到
实例代码：

	async function timeout2(flag){
        if(flag){
            return "hello world";
        }else{
            throw "failed";
        }
    }

    // 如果函数内部抛出错误， promise 对象有一个catch 方法进行捕获
    timeout2(false).catch(err => {
        console.log(err);
    });

    // hello word
    // 调用Promise.resolve() 返回promise 对象
    console.log(timeout2(true));
    // Uncaught (in promise) failed
    // 调用Promise.reject() 返回promise 对象
    console.log(timeout2(false));

5）async必须声明的是一个function，await就必须是在这个async声明的函数内部使用，必须是直系，作用域链不能隔代，在后面放一个返回promise对象的表达式
实例代码：

 // 需求：2s后让数值乘以2
    function doubleAfter(num){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(2*num)
            },2000);
        });
    }

    //  60
    // 等待2s后，promis开始resolve,返回值
    async function test(){
        let result = await doubleAfter(30);
        console.log(result);
    }
    test();

    // 240
    //等待6s后，promis开始resolve,返回值
    async function test2(){
        let first = await doubleAfter(30);
        let second = await doubleAfter(40);
        let third = await doubleAfter(50);
        console.log(first+second+third);
    }
    test2();

6）函数的错误处理，当 async 函数中只要一个 await 出现 reject 状态，则后面的 await 都不会被执行,可以添加 try/catch
实例代码：

let a;
    async function f5(){
        await Promise.reject("error");
        a = await 1;
    }
    //f5().then(v=>console.log(a));

    //  try/catch 解决
    // Uncaught (in promise) ReferenceError: error is not defined
    at f6 (test13.html:124)
    let a3;
    async function f6(){
        try{
             await Promise.reject("error");
        }catch{
            console.log(error);
        }
        a3 = await 123;
        return a3;
    }

    f6().then((v)=>console.log(a3));

  1. async/await的实战

1）需求分析：有两个延时函数，先延时1秒，在延迟2秒，再延时1秒，最后输出“完成”
2）实例代码：

//  延时函数
const setDelay = (millisecond) => {
  return new Promise((resolve, reject)=>{
      if (typeof millisecond != 'number') reject(new Error('参数必须是number类型'));
      setTimeout(()=> {
        resolve(`我延迟了${millisecond}毫秒后输出的`)
      }, millisecond)
  })
}
const setDelaySecond = (seconds) => {
  return new Promise((resolve, reject)=>{
      if (typeof seconds != 'number' || seconds > 10) reject(new Error('参数必须是number类型，并且小于等于10'));
      setTimeout(()=> {
        resolve(`我延迟了${seconds}秒后输出的，注意单位是秒`)
      }, seconds * 1000)
  })
}

 /*  我延迟了${millisecond}毫秒后输出的
    我延迟了${seconds}秒后输出的，注意单位是秒
    我延迟了${millisecond}毫秒后输出的
    完成*/
(async ()=>{
  const result = await setDelay(1000);
  console.log(result);
  console.log(await setDelaySecond(2));
  console.log(await setDelay(1000));
  console.log('完成了');
})()

二、async和await的面试题总结

  1. 谈谈对 async/await 的理解，async/await 的实现原理是什么?
    1）async/await 就是 Generator 的语法糖，使得异步操作变得更加方便
    2）async 函数就是将 Generator 函数的星号（*）替换成 async，将 yield 替换成await
    3）async 是 Generator 的语法糖，这个糖体现在这几个方面：
  • async函数内置执行器，函数调用之后，会自动执行，输出最后结果，而Generator需要调用next或者配合co模块使用
  • 更好的语义，async和await，比起星号和yield，语义更清楚了，async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果
  • 更广的适用性，co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值
  • 返回值是Promise，async函数的返回值是 Promise 对象，Generator的返回值是 Iterator，Promise 对象使用起来更加方便
    4）async/await 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里
    5）实例代码分析：
function my_co(it) {
    return new Promise((resolve, reject) => {
        function next(data) {
            try {
                var { value, done } = it.next(data);
            }catch(e){
                return reject(e);
            }
            if (!done) { 
                //done为true,表示迭代完成
                //value 不一定是 Promise，可能是一个普通值。使用 Promise.resolve 进行包装。
                Promise.resolve(value).then(val => {
                    next(val);
                }, reject);
            } else {
                resolve(value);
            }
        }
        next(); //执行一次next
    });
}
function* test() {
    yield new Promise((resolve, reject) => {
        setTimeout(resolve, 100);
    });
    yield new Promise((resolve, reject) => {
        // throw Error(1);
        resolve(10)
    });
    yield 10;
    return 1000;
}

my_co(test()).then(data => {
    console.log(data); //输出1000
}).catch((err) => {
    console.log('err: ', err);
});
  1. 使用 async/await 需要注意什么？
    1）await 命令后面的Promise对象，运行结果可能是 rejected，此时等同于 async 函数返回的 Promise 对象被reject。因此需要加上错误处理，可以给每个 await 后的 Promise 增加 catch 方法；也可以将 await 的代码放在 try…catch 中。
    2）多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发
    实例代码：
//下面两种写法都可以同时触发
//法一
async function f1() {
    await Promise.all([
        new Promise((resolve) => {
            setTimeout(resolve, 600);
        }),
        new Promise((resolve) => {
            setTimeout(resolve, 600);
        })
    ])
}
//法二
async function f2() {
    let fn1 = new Promise((resolve) => {
            setTimeout(resolve, 800);
        });
    
    let fn2 = new Promise((resolve) => {
            setTimeout(resolve, 800);
        })
    await fn1;
    await fn2;
}

3）await命令只能用在async函数之中，如果用在普通函数，会报错
4）async 函数可以保留运行堆栈
实例代码：

/
* 函数a内部运行了一个异步任务b()。当b()运行的时候，函数a()不会中断，而是继续执行。
* 等到b()运行结束，可能a()早就* 运行结束了，b()所在的上下文环境已经消失了。
* 如果b()或c()报错，错误堆栈将不包括a()。
*/
function b() {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, 200)
    });
}
function c() {
    throw Error(10);
}
const a = () => {
    b().then(() => c());
};
a();
/**
* 改成async函数
*/
const m = async () => {
    await b();
    c();
};
m();

 

前端小歌谣
关注
async/await面试题
zzzld001的博客
07-23 1980
async await什么是 async/awaitasync/await特点async/await优缺点async/await对比Promise的优势async/await 如何捕获异常 什么是 async/await async/await其实是Generator 的语法糖，是一种建立在Promise之上的编写异步或非阻塞代码的新方法，被普遍认为是 JS异步操作的最终且最优雅的解决方案。相对于 Promise 和回调，它的可读性和简洁度都更高。毕竟一直then()也很烦。从字面上来看，async是“异步
“约见“面试官系列之各系列目录汇总（建议学习收藏）
热门推荐
歌谣的博客
07-11 5万+
1.谢谢你那么酷还来关注我，微信公众号GY歌谣，私信可一起学习交流(前端学习ing) 唯一微信号GrievedGeYao 2.18届应届毕业生 本科 三年工作经验 96年 3.想去的地方很远 想买的东西很贵 想守护的东西很美好 所以选择努力。 4拼搏到无能为力，坚持到感动自己
【面试题】async/await
zx1041561837的博客
12-12 1794
本文介绍async\await的基本语法，async/await和Promise的关系，以及async/await的本质。
【面试题】说说你对 async和await 理解_前端面试题asycn和await
最新发布
2401_85123734的博客
06-24 319
这是最常见的场景，await 会等待Promise的状态改为fullfilled，如果成功，那么会将async函数剩余任务推入到微任务队列，如果失败，那么，它会返回即使await右边非函数,只是一个普通的数值，但它本质上是将其转化为,所以因此，当await等待到了成功的结果后，它会将async函数剩余内容推入到微任务队列中等待执行。运行结果为：结论：如果await 右边是一个函数，它会立刻执行这个函数，而且只有当这个函数执行结束后(即函数完成)！才会将async剩余任务推入微任务队列。
async await 面试题
weixin_45345105的博客
11-14 2372
async function t1() { let a = await "lagou"; console.log(a); } t1(); console.log('a') 先打印A 后执行微任务里的 let a = await “lagou”; console.log(a); 原理其实就是Generator 问题1解析 await是一个表达式，如果后面不是一个 promise 对象，会先把表达式转换成promise function * t1 () { let a = yield "lagou
【面试题】说说你对 async和await 理解
web全栈开发的博客
09-26 594
首先跟开始一样，调用async1() 输出1,遇到await async2(),进入等待状态，等待async2()函数完成。​ 微任务队列：cl(4) return undefined(即立即执行函数1完成) cl(6)，如果成功，那么会将async函数剩余任务推入到微任务队列，如果失败，那么。后，将async2函数执行完成推入微任务队列，再将cl(2)推入微任务队列。，直至async2函数完成后，才会将cl(2)推入微任务队列。​ 微任务队列： cl(6) async2完成 cl(2)
[JavaScript] async/await面试题 及其解析
一个普通人的博客
09-03 702
定时器函数在异步操作中的优先级最低； 深入理解 async/await 关键字，以及 await 的原理； 剖析面试题；
【面试题】手写async await核心原理，再也不怕面试官问我async await原理_前端面试题 async 和 await 的 原理
2401_84446825的博客
05-01 290
可以看到运行结果是先打印了1，再打印2了，也就是说明在返回的promise对象没执行resolve()前，就一直在await，等它执行。然后再执行下面的程序，那这个是怎么实现的呢？
C#基础系列：异步编程初探async和await
12-22
异步编程涉及到的东西还是比较多，本篇还是先介绍下async和await的原理及简单实现。 　了解异步之前，我们先来看看Thread对象的升级版本Task对象： 　1、Task对象的前世今生：Task对象是.Net Framework 4.0之后...
浅谈C#中的Async和Await的用法详解
12-31
众所周知C#提供Async和Await关键字来实现异步编程。在本文中，我们将共同探讨并介绍什么是Async 和 Await，以及如何在C#中使用Async 和 Await。 同样本文的内容也大多是翻译的，只不过加上了自己的理解进行了相关...
面试题 async/await
weixin_34088838的博客
04-08 2044
asyncasync 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用await 表明当前函数是异步函数 不会阻塞线程导致后续代码停止运行。async function name([param[, param[, ... param]]]) { statements }复制代码async 函数的返回值很特殊: 不管在函数体内 return 了什么值, a...
async await面试题
qq_43853213的博客
04-20 401
首先看下面这段代码。这是之前字节跳动的面试题。 <script> setTimeout(() => { console.log("setTimeout"); }); async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } as
async/await 面试题 加propmise
fengshaopu的博客
05-07 211
async\await async 可以把普通的函数改成异步函数，调用都是一样的，返回的是一个promise对象 async配合await使用是一个阻塞的异步方法 * async * 返回一个promise对象, 无论函数内部是否有await都会返回promise对象 * 函数内部return返回的值, 会成为then回调函数的第一个参数 * 函数内部如果出现错误,会被then的第二个参数或catch所捕获 * await * 只能在async函数中出现, 普通函数直接使用会报错 * 正常
小白面试：async/await最简单的问题
软件开发学习交流
01-13 448
在.NET面试中，多线程是必考题，尤其是现在的async/await语法糖。首先面试官会问到async/await的原理，async/await使用的优点，以及它们的使用场景。结果小白这次面试官问了原理后居然没有问其它两个问题，而问了"async方法体中有多个await方法调用，方法中await方法调用顺序？"，尽管小白听了很多这块的讲解，这么简单的问题这次居然未正确回答，现在他想想都生气。本文讨论这个问题。
【面试题】对async/await 的了解？
web全栈开发的博客
02-28 466
大厂面试题分享 面试题库后端面试题库 （面试必备） 推荐：★★★★★前端面试题库“编程，就像一场开卷考试，题目的答案取决于对书本内容的熟悉程度；而一份源代码就好比一本书，正所谓读书百遍其义自见，读懂源码就读懂了编程！Hello，《这就是编程》每周六晚如期更新，带大家走进编程世界，一起读懂源码，读懂编程！Error-First Callback风格的异步代码容易出现Callback Hell，Promise的出现某种意义上解决了这个问题，但是期待一种同步风格来编写异步代码。
原生JS面试题：async和await
jiang7701037的博客
05-03 2393
一、解释 ES6 = ES2015 ES7= ES2016 async和await是ES7出现关键字，目的是彻底解决回调地狱，比Promise彻底。即就是：把异步的回调变成了同步的写法。 据说，async和await是回调地狱的终极解决方案。 async：异步 await：等待 二、 async定义函数的格式 语法: ​ async function 函数名(...
async await代码输出——面试题
weixin_44685906的博客
04-30 1478
面试中遇到的async await代码输出怎么理解
【JavaScript】ES2017：Async/Await执行机制及面试例题
ColdCoder的博客
03-22 492
前言 面试过程中，被问到一个题，因为忽略了await出现后先执行async外面的同步代码而出错，特此记录。题目详情： async function async1(){ console.log('1'); await async2(); console.log('2'); } async function async2(){ console.log('3'); } console.log('4') setTimeout(function(){ console.log('
async await 面试题 实践中会遇到的
qq_44917015的博客
11-26 808
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script&
async和await面试题
08-28
异步编程是现代软件开发中非常重要的一部分，而在JavaScript中，async和await是用来处理异步操作的两个关键字。下面是一些关于async和await的面试题： 1. async和await是什么？它们的作用是什么？ - async是用来声明一个函数是异步的，它会返回一个Promise对象。 - await用于等待一个Promise对象的解析结果，并且只能在async函数内部使用。它可以暂停函数的执行，直到Promise对象的状态变为resolved（已解决）。 2. async函数返回什么？ - async函数始终返回一个Promise对象。这个Promise对象的结果取决于函数中的return语句。 3. 在什么情况下使用async和await？ - 当需要处理异步操作时，可以使用async和await来编写更清晰、更易读的异步代码。 - 通常情况下，我们会将回调函数、Promise链式调用或者Generator函数转换为使用async和await的代码。 4. async函数中可以有多个await吗？ - 是的，async函数中可以有多个await语句。每个await语句会暂停函数的执行，直到对应的Promise对象解析为已解决状态。可以按需使用多个await语句来处理多个异步操作。 5. async函数中如何处理错误？ - 可以使用try-catch语句块来捕获和处理错误。在使用await等待一个Promise对象时，如果该Promise对象的状态变为rejected（已拒绝），则会抛出一个异常，可以通过try-catch来捕获并处理该异常。 这些面试题可以帮助你了解async和await的基本概念和用法。当然，还有更多的问题可以进一步探讨和学习。
评论 31
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值