前端面试系列-JavaScript-理解async/await

ゝ一世哀愁。 2022-11-13 00:54 214阅读 0赞

### 文章目录 ###

*  一、async,await
 *   *  1.作用
     *  2.await 在等什么
     *  3.await 等到了要等的，然后呢
 *  二、async、await串行并行处理
 *   *  1.串行
     *  2.并行
 *  三、async、await错误处理
 *  四、优点

# 一、async,await #

*  async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
 *  语法规定**await只能在async函数中使用**

## 1.作用 ##

*  关键在于，async 函数是怎么处理它的返回值的！ 我们当然希望它能直接通过 return 语句返回我们想要的值，但是如果真是这样，似乎就没 await 什么事了。所以，写段代码来试试，看它到底会返回什么：

async function testAsync() {
        return "hello async";
    }
    
    const result = testAsync();
    console.log(result); //输出一个promise 对象 Promise { 'hello async' }

*  async 函数（包含函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
 *  async 函数返回的是一个 Promise 对象，所以在最外层不能用 await 获取其返回值的情况下，我们当然应该用原来的方式：then() 链来处理这个 Promise 对象，就像这样

testAsync().then(v => {
        console.log(v);    // 输出 hello async
    });

**如果 async 函数没有返回值，它会返回 Promise.resolve(undefined)**

联想一下 Promise 的特点——无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。

## 2.await 在等什么 ##

一般来说，都认为 await 是在等待一个 async 函数完成。不过按语法说明，await 等待的是一个表达式，这个表达式的计算结果是 Promise 对象或者其它值（换句话说，就是没有特殊限定）。

因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值——这也可以说是 await 在等 async 函数，但要清楚，它等的实际是一个返回值。注意到 await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面实际是可以接普通函数调用或者直接量的。所以下面这个示例完全可以正确运行

## 3.await 等到了要等的，然后呢 ##

await 等到了它要等的东西，一个 Promise 对象，或者其它值，await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西。

*  如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
 *  如果它等到的是一个 Promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

**await 必须用在 async 函数中的原因:  
async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。**

# 二、async、await串行并行处理 #

## 1.串行 ##

等待前面一个await执行后接着执行下一个await，以此类推

async function asyncAwaitFn(str) {
        return await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(str)
            }, 1000);
        })
    }
    
    const serialFn = async () => { //串行执行
    
        console.time('serialFn')
        console.log(await asyncAwaitFn('string 1'));
        console.log(await asyncAwaitFn('string 2'));
        console.timeEnd('serialFn')
    }
    
    serialFn();
    
    //string 1
    // string 2
    //serialFn: 2025.989013671875 ms
    
    //可以看到两个await串行执行的总耗时为两千多毫秒。

## 2.并行 ##

将多个promise直接发起请求（先执行async所在函数），然后再进行await操作。

async function asyncAwaitFn(str) {
        return await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(str)
            }, 1000);
        })
    }
    const parallel = async () => { //并行执行
        console.time('parallel')
        const parallelOne = asyncAwaitFn('string 1');
        const parallelTwo = asyncAwaitFn('string 2')
    
        //直接打印
        console.log(await parallelOne)
        console.log(await parallelTwo)
    
        console.timeEnd('parallel')
    
    
    }
    parallel()
    //string 1
    //VM28:15 string 2
    //VM28:17 parallel: 1002.701904296875ms

# 三、async、await错误处理 #

JavaScript异步请求肯定会有请求失败的情况，上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。

在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

async function catchErr() {
          try {
              const errRes = await new Promise((resolve, reject) => {
                    setTimeout(() => {
                        reject("http error...");
                     }, 1000);
               });
                    //平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
                    // console.log(errRes.status, errRes.statusText);
            } catch(err) {
                 console.log(err);
            }
    }
    catchErr(); //http error...

# 四、优点 #

简单的说async函数就相当于自执行的Generator函数，相当于自带一个状态机，在 await 的部分等待返回， 返回后自动执行下一步。而且相较于Promise，async 的优越性就是把每次异步返回的结果从 then 中拿到最外层的方法中，不需要链式调用，只要用同步的写法就可以了。

[参考:https://segmentfault.com/a/1190000007535316][https_segmentfault.com_a_1190000007535316]

[本文链接：https://blog.csdn.net/qq\_39903567/article/details/115186082][https_blog.csdn.net_qq_39903567_article_details_115186082]

[https_segmentfault.com_a_1190000007535316]: https://segmentfault.com/a/1190000007535316
[https_blog.csdn.net_qq_39903567_article_details_115186082]: https://blog.csdn.net/qq_39903567/article/details/115186082