面试题

本节目标：理解“面试题”的核心思路，并能把它用于实际开发或面试表达。

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(function () {
  console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("promise2");
});
console.log("script end");

注：因为是一道前端面试题，所以答案是以浏览器的eventloop机制为准的，在node平台上运行会有差异相信大多数前端都知道，这道题考的就是js里面的事件循环和任务队列知识点同步任务、异步任务、宏任务、微任务、任务队列、执行栈、js运行机制、Event Loop这题考察的是js中的事件循环和任务队列，注意以下几点：Promise优先于setTimeout宏任务。所以，setTimeout回调会在最后执行Promise一旦被定义，就会立即执行Promise的reject和resolve是异步执行的回调。所以，resolve()会被放到回调队列中，在主函数执行完和setTimeout前调用await执行完后，会让出线程。async标记的函数会返回一个Promise对象async介绍async function 声明将定义一个返回 AsyncFunction 对象的异步函数当调用一个 async 函数时，会返回一个 Promise 对象当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值它通过返回一个 Promise 对象来返回结果最大的特点是：通过 async / await 将异步的操作，但写法和结构却是和我们平时写的（同步代码）是一样awaitawait操作符用于等待一个Promise对象await表达式会暂停当前asyncfunction的执行，等待Promise处理完成，若Promise正常处理,其回调的resolve函数参数作为await表达式的值，继续执行async functionawait意味让出线程操作返回值（return_value）：返回 Promise 对象的处理结果。如果等待的不是 Promise 对象，则返回该值本身,所以，当await操作符后面的表达式是一个Promise的时候，它的返回值，实际上就是Promise的回调函数resolve的参数我们都知道Promise是一个立即执行函数，但是他的成功（或失败：reject）的回调函数resolve却是一个异步执行的回调。当执行到resolve()时，这个任务会被放入到回调队列中，等待调用栈有空闲时事件循环再来取走它promiseasync会返回Promise对象，如果返回值不是Promise对象则调用Promise resolve来换成Promise对象async/await建立在Prmise机制上总结一句话：带async关键字的函数，它使得你的函数的返回值必定是 promise 对象上EvenLoop这里先简单的说一些Event Loop的概念，在最近这段时间我会写一篇关于Event Loop的文章Javascript是单线程的，所有的同步任务都会在主线程中执行主线程之外，还有一个任务队列。每当一个异步任务有结果了，就往任务队列里塞一个事件。当主线程中的任务，都执行完之后，系统会 “依次” 读取任务队列里的事件。与之相对应的异步任务进入主线程，开始执行异步任务之间，会存在差异，所以它们执行的优先级也会有区别。大致分为微任务（micro task，如：Promise、MutaionObserver等）和宏任务（macro task，如：setTimeout、setInterval、I/O等）。同一次事件循环中，微任务永远在宏任务之前执行主线程会不断重复上面的步骤，直到执行完所有任务

1. async声明的函数只是把该函数的return包装了，使得无论如何都会返回promise对象（非promise会转化为promise{resolve}），除此之外与普通函数没有不同，没有特殊待遇。2. await声明只能用在async函数中。当执行async函数时，遇到await声明，会先将await后面的内容按照'平常的执行规则'执行完，执行完后立马跳出async函数，去执行主线程其他内容，等到主线程执行完再回到await处继续执行后面的内容。 > 来自 <https://zhuanlan.zhihu.com/p/97138729> 题目结果分析过程第一步，输出script start虽然有两个函数声明，有async关键字，但是没有调用我们就不看，直接打印同步代码console.log(‘script start’)第二步，输出async1 start在执行async1这个函数的时候，async表达式定义的函数也是立即执行在前面我们说过看到带有async关键字函数，不用慌，它仅仅是把return值包装成了promise,所以就很普通的打印 console.log( 'async1 start' )第三步，输出async2async2是async定义的函数，输出async2并返回promise对象， await后，中断async函数，先执行async外的同步代码，目前就直接打印 console.log('async2')第四步，输出promise1执行new Promise()，Promise构造函数是直接调用的同步代码，所以就打印console.log( 'promise1' )第五步，输出script end因为上一步先打印了promise1,然后执行到resolve的时候，然后跳出promise继续向下执行，所以就打印console.log( 'script end' )第六步，输出async1 end因为await定义的这个promise已经执行完，并且返回结果，所以继续执行async1函数后的任务，就是console.log(‘async1 end’)第七步，输出promise2因为前面的new promise放进resolve回调，这个resolve被放到调用栈执行,所以就打印console.log('promise')第八步，输出setTimerout最后执行定时器（宏任务）setTimeout,打印console.log( 'setTimerout' )题目变式一在这个变式中我将async2中的函数也变成了Promise函数，代码如下：async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { //async2做出如下更改： new Promise(function(resolve) { console.log('promise1'); resolve();}).then(function() { console.log('promise2'); });}console.log('script start'); setTimeout(function() { console.log('setTimeout');}, 0)async1(); new Promise(function(resolve) { console.log('promise3'); resolve();}).then(function() { console.log('promise4');}); console.log('script end');复制代码正确答案script startasync1 startpromise1promise3script endpromise2async1 endpromise4setTimeout复制代码题目变式二我将async1中await后面的代码和async2的代码都改为异步的，代码如下：async function async1() { console.log('async1 start'); await async2(); //更改如下： setTimeout(function() { console.log('setTimeout1') },0)}async function async2() { //更改如下： setTimeout(function() { console.log('setTimeout2') },0)}console.log('script start'); setTimeout(function() { console.log('setTimeout3');}, 0)async1(); new Promise(function(resolve) { console.log('promise1'); resolve();}).then(function() { console.log('promise2');});console.log('script end');复制代码正确答案script startasync1 startpromise1script endpromise2setTimeout3setTimeout2setTimeout1复制代码题目变式三这道题整体来说与上面题大同小异与，代码如下：async function a1 () { console.log('a1 start') await a2() console.log('a1 end')}async function a2 () { console.log('a2')} console.log('script start') setTimeout(() => { console.log('setTimeout')}, 0) Promise.resolve().then(() => { console.log('promise1')}) a1() let promise2 = new Promise((resolve) => { resolve('promise2.then') console.log('promise2')}) promise2.then((res) => { console.log(res) Promise.resolve().then(() => { console.log('promise3') })})console.log('script end')复制代码正确答案script starta1 starta2promise2script endpromise1a1 endpromise2.thenpromise3setTimeout > 来自 <https://www.sibida.net/article/49339> > 来自 <https://www.sibida.net/article/49339>

面试题 ​

面试题