async await 面试题

喜欢ヅ旅行 2022-12-21 03:28 177阅读 0赞

# 面试题 #

## 阅读下面代码，分析浏览器环境下的执行结果，并说明具体原因。 ##

async function async1() { 
      console.log("AAAA");
      async2(); 
      console.log("BBBB");
    }
    async function async2() { 
      console.log("CCCC");
    }
    
    console.log("DDDD");
    setTimeout(function () { 
      console.log("FFFF");
    }, 0);
    async1();
    new Promise(function (resolve) { 
      console.log("GGGG");
      resolve();
    }).then(function () { 
      console.log("HHHH");
    });
    console.log("IIII");

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]  
async2 前加上 await

async function async1() { 
      console.log("AAAA");
      await async2();  // await new Promise(function(resolve) { resulve(undefined) })
      console.log("BBBB");
    }
    async function async2() { 
      console.log("CCCC");
    }
    
    console.log("DDDD");
    setTimeout(function () { 
      console.log("FFFF");
    }, 0);
    async1();
    new Promise(function (resolve) { 
      console.log("GGGG");
      resolve();
    }).then(function () { 
      console.log("HHHH");
    });
    console.log("IIII");

结果输出是 DDDD AAAA CCCC GGGG IIII BBBB HHHH FFFF

## 解析 ##

本题考察重点是 js 异步执行、 宏任务、 微任务。  
这道题的坑就在于 async 中如果没有 await，那么它就是一个纯同步函数。

这道题的起始代码在第 9 行，输出`DDDD`  
第 10 行计时器开启一个异步任务 t1（一个称呼），这个任务且为宏任务。  
第 13 行函数`async1`执行，这个函数内没有 await 所以它其实就是一个纯同步函数，打印输出`AAAA`,  
在`async1`中执行`async2`函数，因为`async2`的内部也没有 await，所以它也是个纯同步函数，打印输出`CCCC`  
紧接着打印输出`BBBB`。  
第 14 行 new Promise 执行里面的代码也是同步的,所以打印输出`GGGG`,resolve()调用的时候开启一个异步任务 t2（一个称呼），且这个任务 t2 是微任务，它的执行交给 then()中的第一个回调函数执行，且优先级高于宏任务（t1）执行。  
第 20 行打印输出`IIII`,此时线程上的同步任务全部执行结束。  
在执行任务队列中的异步任务时，微任务优先于宏任务执行，所以先执行微任务 t2 打印输出 `HHHH`,然后执行宏任务 t1 打印输出 `FFFF`  
所以综上 结果输出是 DDDD AAAA CCCC BBBB GGGG IIII HHHH FFFF

### 面试题2 ###

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"
      console.log(a)
    }
    
    
    const generator = t1()
    let result = generator.next()
    result.value = Promise.resolve(result.value)
    result.value.then(data => { 
      generator.next(data)
    })
    console.log('xx')

function * t1 () { 
      let a = yield 'lagou'
      console.log(a)
    }
    
    co(t1)
    
    function co (generator) { 
      const g = generator()
      function handleResult (result) { 
        if (result.done) { 
          return Promise.resolve(result.value)
        }
        // 如果 yield 后面的值不是 Promise 对象，保证成 Promise 对象
        if (!(result.value instanceof Promise)) { 
          result.value = Promise.resolve(result.value)
        }
        return result.value.then(function (data) { 
          handleResult(g.next(data))
        })
      }
      return handleResult(g.next())
    }

问题 2

async function t2 () { 
      let a = await new Promise((resolve) => { });
      console.log(a); //
    }
    t2();

#### 问题2解析 ####

`await`后面如果跟一个 `promise` 对象，`await` 将等待这个 `promise` 对象的 `resolve` 状态的值 `value`，且将这个值返回给前面的变量，此时的 `promise` 对象的状态是一个 `pending` 状态，没有 `resolve` 状态值，所以什么也打印不了。

function * t2 () { 
      let a = yield new Promise((resolve) => { });
      console.log(a); //
    }
    const generator = t2()
    const result = generator.next()
    result.value.then(v => { 
      generator.next(v)
    })

问题 3

async function t3 () { 
      let a = await new Promise((resolve) => { 
        resolve();
      });
      console.log(a); 
    }
    t3();

#### 问题3解析 ####

`await`后面如果跟一个 `promise` 对象，`await` 将等待这个 `promise` 对象的 `resolve` 状态的值 `value`，且将这个值返回给前面的变量，此时的 `promise` 对象的状态是一个 `resolve` 状态，但是它的状态值是`undefined`，所以打印出 `undefined`。

function * t3 () { 
      let a = yield new Promise((resolve) => { 
        resolve();
      });
      console.log(a); //undefined
    }
    
    const generator = t3()
    const result = generator.next()
    result.value.then(v => { 
      generator.next(v)
    })

问题 4

async function t4 () { 
      let a = await new Promise((resolve) => { 
        resolve("hello");
      });
      console.log(a); 
    }
    t4();

#### 问题4解析 ####

`await`后面如果跟一个 `promise` 对象，`await` 将等待这个`promise` 对象的`resolve` 状态的值，且将这个值返回给前面的变量，此时的`promise` 对象的状态是一个 `resolve` 状态，它的状态值是 `hello`，所以打印出 `hello`。

function * t4 () { 
      let a = yield new Promise((resolve) => { 
        resolve("hello")
      })
      console.log(a) //hello
    }
    
    const generator = t4()
    const result = generator.next()
    result.value.then(v => { 
      generator.next(v)
    })

问题 5

async function t5() { 
      let a = await new Promise((resolve) => { 
        resolve("hello");
      }).then(() => { 
        return "lala";
      });
      console.log(a); //lala
    }
    t5();

#### 问题5解析 ####

`await`后面如果跟一个`promise` 对象，`await` 将等待这个 `promise` 对象的 `resolve` 状态的值，且将这个值返回给前面的变量，此时的 `promise` 对象的状态是一个 `resolve` 状态，它的状态值是 `hello`，紧接着后面又执行了一个 `then` 方法，`then` 方法又会返回一个全新的 `promise` 对象，且这个 `then` 方法中的返回值会作为这个全新的 `promise` 中 `resolve` 的值，所以最终的结果是 `lala`。

问题 6

async function t6() { 
      let a = await fn().then((res) => { 
        return res;
      });
      console.log(a); 
    }
    async function fn() { 
      await new Promise((resolve) => { 
        resolve("lagou");
      });
    }
    t6();

#### 问题6解析 ####

首先考虑 `fn()` 执行返回一个`promise` 对象，因为 `fn`执行没有返回值，所以这个 `promise` 对象的状态 `resolve` 的值是 `undefined`，且将这个 `undefined` 当作下一个 `then` 中回调函数的参数，所以打印的结果是 `undefined`

async function t6() { 
      let a = await new Promise(function (resolve) { 
        	resolve(undefined)
      	}).then((res) => { 
        	return res;
      	});
      console.log(a); //undefined
    }

问题 7

async function t7() { 
      let a = await fn().then((res) => { 
        return res;
      });
      console.log(a);
    }
    async function fn() { 
      await new Promise((resolve) => { 
        resolve("lagou");
      });
      return "lala";
    }
    t7();

#### 问题7解析 ####

首先考虑 `fn()` 执行返回一个 `promise` 对象，因为`fn()`执行有返回值`lala`，所以这个 `promise` 对象的状态 `resolve` 的值是 `lala`，且将这个 `lala` 当作下一个 `then` 中回调函数的参数，所以打印的结果是 `lala`。

async function t7() { 
      let a = await new Promise(function (resolve) { 
        resolve('lala')
      }).then((res) => { 
        return res;
      });
      console.log(a); // lala
    }
    
    t7();

## 注意细节 ##

*  `async` 函数执行的返回结果是一个 `promise` 对象，这个函数的返回值是这个 `promise` 状态值 `resolve`的值
 *  `await` 后面如果不是一个 `promise` 对象，将直接返回这个值
 *  `await` 后面如果是一个 `promise` 对象，将会把这个 `promise` 的状态 `resolve` 的值返回出去。
 *  以上没有考虑 `reject` 状态。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4eb3c39d579340299ec42bac1df2fdee.png