Async/await详解

一、概念与背景

他是在ES8被提出的一种异步方式，它其实是promise的一种语法糖

二、 Async关键字

async 关键字用于快速声明异步函数 ，可以用在函数声明、函数表达式、箭头函数和方法上

async function foo() {} 
let bar = async function() {}; 
let baz = async () => {}; 
class Qux { async qux() {} } 

2.1、特性

• async声明的异步函数，如果没有返回值，则它就是普通函数，没有什么特别

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

• async声明的异步函数，如果有返回值，则返回值会被Promise.resolve自动包装成promise返回
• async声明的异步函数，可以用await来调用其他异步函数

三、await

该关键字可以暂停异步函数代码的执行，等待解决

let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
 p.then((x) => console.log(x)); // 3
 
// 使用 async/await 可以写成这样:
async function foo() {
let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
	console.log(await p);
}
foo(); // 3

3.1、特性

• await 关键字期待(但实际上并不要求)一个实现 thenable 接口的对象，但常规的值也可以。如果是实现 thenable 接口的对象，则这个对象可以由 await 来“解包”。如果不是，则这个值就被当作 已经解决的期约

// 等待一个原始值
async function foo() {
	console.log(await 'foo'); }
foo(); 
// foo

 // 等待一个没有实现 thenable 接口的对象
 async function bar() {
	console.log(await ['bar']); 
}
bar();
 // ['bar']
 
// 等待一个实现了 thenable 接口的非期约对象 
async function baz() {
  const thenable = {
    then(callback) { 
    	callback('baz');
     }
};
console.log(await thenable); }
baz(); 
// baz

// 等待一个期约 
async function qux() {
	console.log(await Promise.resolve('qux')); 
}
qux();
// qux

• 如果await等待的结果是抛出了一个错误，或者是一个失败的promise，则不会执行异步函数中后面的代码了，该异步函数就会返回一个失败的promise

async function foo2() { 
	console.log(1);
	const aaa = await (() => { throw 3; })();
	console.log(2)
}
foo2().then(console.log).catch(console.log)
// 1 3


async function foo2() { 
	console.log(1);
	const aaa = await 	Promise.reject(3)
	console.log(2)
}
foo2().then(console.log).catch(console.log)
// 1 3

3.2、await使用场景

await关键字只能在这两个场景下使用：
1、async定义的异步函数中；
2、模块的最外层作用域中（a、html中的script标签声明type='module’类型，b、es6中的模块js文件中）

四、分析执行顺序demo

async function foo() {
    console.log(await Promise.resolve('foo'));
}
async function bar() { 
    console.log(await 'bar');
}
async function baz() { 
    console.log('baz');
}
const p = new Promise(resolve=>{console.log(2222),resolve('promise')})
p.then(v=>console.log(v))
foo();
bar();
baz();

// 输出结果：
2222
baz
promise
foo
bar

代码解析：

• 首先执行promise的构造函数内部，打印2222，然后执行resolve(‘promise’)，将状态改为成功
• 然后遇到.then（）将then中的回调函数放到微任务队列中
• 执行调用foo函数，遇到console.log(await Promise.resolve(‘foo’)) ；可以将这语句改为同等意思的promise写法new Promise(resolve=>resolve(‘foo’).then(val=>console.log(val)))，所以还是一样先执行resolve(‘foo’)状态成功后，将then中的回调放到微任务中
• 继续调用bar函数，await后面如果是普通值，也会默认被Promise.resolve()方法包装，所以和上面的同理，将console.log(‘bar’)放到微任务队列中
• 继续执行调用baz函数，由于baz函数内部没有返回值，所以和普通同步函数一样，所以直接打印baz
• 此时第一次宏任务执行完了，就会执行所有的微任务，于是就有依次打印promise、foo、bar

async function t1() { 
  console.log(1111);
  console.log(await t2());
  console.log(2222);
}
async function t2() { 
  console.log(3333);
 return await 4444
}
t1()
console.log(5555);
setTimeout(() => {
  console.log(6666);
}, 0)
new Promise((resolve, reject) => { 
  console.log(7777);
  resolve()
}).then(() => { 
	console.log(8888); 
})
console.log(9999);

代码解析：

• 首先调用t1函数，打印1111，然后遇到console.log(await t2())，会先去执行t2，可以改写下t2函数

  function t2(){
  	return new Promise(resolve1=>{
  		console.log(3333);
  		resolve1(new Promise(resolve2=>{
  			resolve2(4444)
  		}))
  	})
  }
  

• 所以就是先打印3333，执行第一个resolve，状态成功后将resolve1括号中的内容都看成第一个promise的then回调，将这个回调放到微任务队列中

• 然后打印5555

• 遇到setTimeout，将其回调放到宏任务队列中

• 然后执行下面promise构造函数内部代码，打印7777，然后成功后，将then中的console.log(8888); 回调放到微任务队列中

• 继续执行，打印9999

• 至此，第一次宏任务执行完了，接下来去执行所有微任务

• 此时会去执行t2函数中的.then(new Promise(resolve2=>{resolve2(4444)}))，执行内部构造函数，将第二个promise状态置为成功后，t2函数执行完成，await t2()等到的结果相当于是一个值为4444 的promise，所以await前面的console.log就又相当于是该promise.then（）中的回调，所以再次将console语句放入微任务队列中

• 此时后面的console.log(2222);语句也不会执行，因为前面的await语句还没执行完，还有个回调没执行完

• 所以就会继续执行微任务队列中的console.log(8888);

• 然后发现微任务队列中还存在刚刚放入的console.log(4444)

• 继续往下执行 console.log(2222);

• 至此，第一次宏、微任务都执行完了，就会去宏任务队列中找下一个宏任务，发现有，则会执行打印6666