【前端基础】谈谈异步函数Async和await

看两道简单异步函数题

async function foo() {
    
    
  console.log(2);
  console.log(await Promise.resolve(8));
  console.log(9);
}

async function bar() {
    
    
  console.log(4);
  console.log(await 6);
  console.log(7);
}

console.log(1);
foo();
console.log(3);
bar();
console.log(5);

这里的打印顺序为： 1 2 3 4 5 8 9 6 7；解释为：前面两个在声明函数，后面执行打印1，然后执行foo函数打印2，遇到await暂停执行，把后面的任务放入异步队列中，并把期约落定的值提供给异步任务。再打印3，4，遇到await暂停执行，把立即可用的6向异步消息队列中添加后面的任务。在打印5，在打印8，打印9 ，打印6，打印7。另一种答案是因为await做过修改，所以新版的浏览器是上面的结果，修改为await Promise.resolve(8)立即解决8，然后把本行代码和后面的代码放入异步任务中。

对于实际开发中，对于并行的异步操作我们通常更关注结果，而不是依赖执行顺序。

例如变式：

async function foo() {
    
    
  console.log(2);
  console.log(await Promise.resolve(8));
  console.log(9);
  return 6;
}

async function bar() {
    
    
  console.log(4);
  console.log(await foo());
  console.log(7);
}

console.log(1);
foo();
console.log(3);
bar();
console.log(5);

打印的结果为：1 2 3 4 2 5 8 9 8 9 6 7。
有不理解的可以评论留言，或者私信都行，本人一定回复。

异步函数可以实现sleep()

//非阻塞的暂停
async function sleep(delay) {
    
    
  return new Promise((resolve, reject) => {
    
    
    setTimeout(resolve, delay, 1);
  });
}

async function foo() {
    
    
  console.time("w");
  await sleep(3000); //这个后面的代码是异步的。
  console.timeEnd("w");
}
foo();
//w: 3.002s