JavaScript进阶讲解十八—＞await-async-eventloop

异步函数

async关键字用于声明一个异步函数

async function foo() {
    
}

const foo1 = async function() {
    
}

const foo2 = async () => {
    
}

class Foo3 {
    async foo() {

    }
}

异步函数的执行流程

async function foo() {
    console.log('foo start');

    console.log(1);
    console.log(2);

    console.log('foo end');
}

console.log(3);

foo()

console.log(4);

// 3 foo start 1 2 foo end 4

我们可以看到在只加了async 的情况下，他和同步的函数时一样的

异步函数有返回值时，和普通函数会有区别

1. 异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中
2. 异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定
3. 异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定
4. 在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作Promise的reject来传递

await关键字

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。

1. 使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
2. await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数
3. 如果await后面是一个普通的值，那么会直接返回这个值
4. 如果await后面是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值
5. 如果await后面的表达式，返回的Promise是reject的状态，那么会将这个reject结果直接作为函数的Promise的reject值

浏览器的事件循环

JavaScript是单线程的，但是JavaScript的线程应该有自己的容器进程：浏览器或者Node。

js既然是单线程的，那他遇到异步函数，会怎么样呢？

当遇到异步函数时，这个这个函数被放到入调用栈中，执行会立即结束，并不会阻塞后续代码的执行。

事件循环中并非只维护着一个队列，而是有两个队列：

1. 宏任务队列（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
2. 微任务队列（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等

优先级

1. main script中的代码优先执行（编写的顶层script代码）
2. 执行任何一个宏任务之前（不是队列，是一个宏任务），都会先查看微任务队列中是否有任务需要执行

面试题

async function foo() {
    console.log(1);
    await console.log(2);

    console.log(3);
}

foo()
console.log(4);

这里有个await 可能会误导，console.log(2);与console.log(1);，他们是属于同一代码块的，所以在执行了console.log(1);后console.log(2);也会跟着执行，而在后面的代码会进微任务队列

结果 1 2 4 3

setTimeout(function () {
  console.log("setTimeout1");
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log("then4");
    });
    console.log("then2");
  });
});

new Promise(function (resolve) {
  console.log("promise1");
  resolve();
}).then(function () {
  console.log("then1");
});

setTimeout(function () {
  console.log("setTimeout2");
});

console.log(2);

queueMicrotask(() => {
  console.log("queueMicrotask1")
});

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log("then3");
});

这个就比上一个复杂点了，但是我们可以一步一步的分析。
我们来看看这里面主要就是有Promise与setTimeout，Promise的then是微任务，而setTimeout是宏任务，所以不用想setTimeout中的代码一定是最后执行的，所以第一个setTimeout我们跳过，这时遇到第一个Promise，在之前讲Promise的章节，我们说过，传入Promise中的回调是会被立即执行的，所以打印promise1，then后面的代码，就加入了微任务队列，继续遇到第二个setTimeout，我们跳过，打印2，遇到queueMicrotask，加入微任务队列，继续遇到最后一个Promise，里面只是resolve，then中的又加入微任务队列，然后我们再去看微任务队列，依次打印then1 queueMicrotask1 then3， 微任务队列执行完毕，再看宏任务队列，依次打印setTimeout1 then2 then4 setTimeout2

所以答案是：promise1 2 then1 queueMicrotask1 then3 setTimeout1 then2 then4 setTimeout2

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')

答案： script start， async1 start， async2， promise1， script end， async1 end， promise2， setTimeout

Promise.resolve().then(() => {
    console.log(0);
    return 4
  
  }).then((res) => {
    console.log(res)
  })
  
  Promise.resolve().then(() => {
    console.log(1);
  }).then(() => {
    console.log(2);
  }).then(() => {
    console.log(3);
  }).then(() => {
    console.log(5);
  }).then(() =>{
    console.log(6);
  })

这里有两个Promise，所以直接看第一个，首先输出0，然后遇到return 4，这个会被加到微任务队列，然后来到第二个Promise.resolve()，打印1，这里没有return ，其实相当于return undefined，这里又加入微任务队列，所以开始执行微任务队列，依次打印4 2 3 5 6

答案 0 1 4 2 3 5 6