JavaScript：async和await

参考博客：https://www.jianshu.com/p/b4fd76c61dc9

两种等待

async中文意思是异步；await中文意思是等待
首先要明白，等待有分2种，一种是干等着，等待的时候不做其他事情；一种是边等边做其他事情。await这种等待是后者。

代码实例

// 以吃饭、睡觉、手机充电、拔电源为例子
function lunch(){
	return new Promise((resolve, reject) => {
		console.log("吃饭ing");
		resolve("吃完饭了");
	})
}

function sleep(){
	return new Promise((resolve, reject) => {
		console.log("睡觉ing");
		resolve("起床");
	})
}

function mobilePhoneCharging(){
	return new Promise((resolve, reject) => {
		console.log("手机充电ing");
		resolve("手机充电完成");
	})
}

function powerOff(){
	console.log("拔电源");
}

• 没有async/await的版本去执行

function main(){
	// 要先吃饭在睡觉
	lunch().then(res => {
		console.log(res );
		sleep();
	})
	// 但是手机充电不需要先吃饭，可以吃饭前就开始充电
	mobilePhoneCharging().then(res => {
		console.log(res);
		powerOff();
	})
}

// 错误的做法
async function main(){
	let lunchRes = await lunch()
	console.log(lunchRes);
	leep();
	// 这种写法是错误的，因为本来mobilePhoneCharging是不依赖lunch的，现在要等待完lunch执行完才能执行mobilePhoneCharging
	let mobilePhoneChargingRes = await mobilePhoneCharging();
	console.log(mobilePhoneChargingRes );
	powerOff();
}

// 正确的做法
function main(){
	// 因为lunchAndSleep被标记成了一个异步方法
	// 所以lunchAndSleep方法执里执行被阻塞了，不影响外面，外面还是继续走。
	// 也就是main方法边等lunchAndSleep执行完，边做其他事情。
	lunchAndSleep();
	mobilePhoneChargingAndPowerOff();
}

async function lunchAndSleep(){
	// 加了await，那么就要执行完这个方法，才会继续往下走
	// 所以async方法里是同步执行的
	let res = await lunch()
	console.log(res)
	leep();
}

async function mobilePhoneChargingAndPowerOff(){
	let res = await mobilePhoneCharging();
	console.log(res)
	powerOff();
}

语法补充

1.方法里如果想使用await关键字，那么该方法就要被async修饰。因为你想阻塞方法内部，就不能影响外面执行，所以这个方法是要被标记成异步的
2.await methodA()，那么methodA方法返回值就必须要是promise，并且await methodA()是拿promise方法的resolve值