搞懂一道async await, promise， setTimeout执行顺序的前端面试题

Jrain 发布于2019-08-23 12:51 / 3178人阅读

摘要：不再废话，下面见题执行执行输出结果执行执行这道题最难理解的地方和的执行顺序，前面的结果一般没有异议，如果不明白，百度一下变可以理解。

先指明这道题是面试题的改版，原题可以看：promise、async和await之执行顺序的那点事
这道题也不是我改的，出处见：async/await 执行顺序详解

这两篇文章写的非常好，我仔细琢磨了一下，感觉受益匪浅，决定记录一下自己的理解。
不再废话，下面见题：

async function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
}

async function testAsync() {
    console.log("执行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    const v1 = await testSometing();
    console.log(v1);
    const v2 = await testAsync();
    console.log(v2);
    console.log(v1, v2);
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

输出结果：

1 test start...
2 执行testSometing
3 promise start..
4 test end...
5 promise
6 testSometing
7 执行testAsync
8 hello async
9 testSometing hello async

这道题最难理解的地方5和6的执行顺序，前面1~4的结果一般没有异议，如果不明白，百度一下变可以理解。
5的结果是promise的then方法里输出的，6打印的第一个await的返回结果。

下面先说一下async的await：
async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，将await的结果封装成一个Promise，并等待解析完成后继续执行，
另外如果await 遇上async函数，阮一峰老师这么说明：
async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

所以如果await遇到了 async函数，就会封装两次Promise，即：

const v1 = await testSometing();

可以理解成下面的代码：

new Promise((resolve)=> {
 resolve(Promise.resolve(testSometing()));
}).then((val)=>{
  const v1 = val
  ...
})

按照这个思路，将题目await 都替换成promise：

function testSometing() {
    console.log("执行testSometing");
    return "testSometing";
}

function testAsync() {
    console.log("执行testAsync");
    return Promise.resolve("hello async");
}

async function test() {
    console.log("test start...");
    new Promise((resolve)=> {
     resolve(Promise.resolve(testSometing()));
    }).then((val)=>{
      const v1 = val
      console.log(v1);
      new Promise((resolve)=> {
         resolve(Promise.resolve(testAsync()));
      }).then((val)=>{
          const v2 = val
          console.log(v2);
          console.log(v1, v2);
      })
    })
    
}

test();

var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
promise.then((val)=> console.log(val));

console.log("test end...")

执行的结果如下：

test start...
执行testSometing
promise start..
test end...
promise
testSometing
执行testAsync
hello async
testSometing hello async

大家可以和最上面的结果对比一下，哈哈！完全一样。

这道题应该算是明白了，但是我又发现一个新的问题，现在还没搞明白，请大神解答

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99053.html

用一道大厂面试题带你搞懂事件循环机制

本文涵盖面试题的引入对事件循环面试题执行顺序的一些疑问通过面试题对微任务、事件循环、定时器等对深入理解结论总结面试题面试题如下，大家可以先试着写一下输出结果，然后再看我下面的详细讲解，看看会不会有什么出入，如果把整个顺序弄清楚 Node.js 的执行顺序应该就没问题了。 async function async1(){ console.log(async1 start) ...

ShowerSun 2019-08-26 10:57 评论0 收藏0
「今日头条」前端面试题和思路解析

摘要：一篇文章和一道面试题最近，有篇名为张图帮你一步步看清和的执行顺序的文章引起了我的关注。作者用一道年今日头条的前端面试题为引子，分步讲解了最终结果的执行原因。从字面意思理解，让我们等等。当前的最新版本，在这里的执行顺序上，的确存在有问题。一篇文章和一道面试题最近，有篇名为《8张图帮你一步步看清 async/await 和 promise 的执行顺序》的文章引起了我的关注。作者用...

宠来也 2019-08-23 14:14 评论0 收藏0
前端 100 问：能搞懂80%的请把简历给我

摘要：解析第题第题为什么的和的中不能做异步操作解析第题第题京东下面代码中在什么情况下会打印解析第题第题介绍下及其应用。尽量减少操作次数。解析第题第题京东快手周一算法题之两数之和给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。引言半年时间，几千人参与，精选大厂前端面试高频 100 题，这就是「壹题」。在 2019 年 1 月 21 日这天，「壹题」项目正式开始，在这之后每个工...

Scott 2019-08-23 18:35 评论0 收藏0
最后一次搞懂 Event Loop

摘要：由于是单线程的，这些方法就会按顺序被排列在一个单独的地方，这个地方就是所谓执行栈。事件队列每次仅执行一个任务，在该任务执行完毕之后，再执行下一个任务。 Event Loop 是 JavaScript 异步编程的核心思想，也是前端进阶必须跨越的一关。同时，它又是面试的必考点，特别是在 Promise 出现之后，各种各样的面试题层出不穷，花样百出。这篇文章从现实生活中的例子入手，让你彻底理解 E...

gself 2019-05-23 17:35 评论0 收藏0
8张图帮你一步步看清 async/await 和 promise 的执行顺序

摘要：第部分画图一步步看清宏任务微任务的执行过程我们以开篇的经典面试题为例，分析这个例子中的宏任务和微任务。注意这里只是把推入微任务队列，并没有执行。执行结束，才能继续执行后面的代码如图此时当前宏任务都执行完了，要处理微任务队列里的代码。 8张图让你一步步看清 async/await 和 promise 的执行顺序为什么写这篇文章？测试一下自己有没有必要看需要具备的前置基础知识主...

weizx 2019-08-23 13:51 评论0 收藏0