JavaScript进阶（二十四）：ES8 中 async 与 await 使用方法详解_react await

很明显，async函数返回的就是promise对象。

那么在没有await配合下，async返回promise对象，所以可以配合then处理。

async function testAsync() {
	return "Hello Async"
}

testAsync().then(result => {
	console.log(result);
})

执行结果如下图：

返回同样结果，所以和promise对象中then用法一样的效果。回想一下 Promise 的特点——无等待，所以在没有 await 的情况下执行 async 函数，它会立即执行，并返回一个 Promise 对象，并且，绝不会阻塞后面的语句。这和普通返回 Promise 对象的函数并无二致。

三、await 作用

await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西。如果它等待的是一个 Promise 对象，等 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

注⚠️： async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。

function takeLongTime() {
	return new Promise(resolve => {
		setTimeout(() => {"..模拟耗时操作.."}, 1000);
	});
}

takeLongTime().then(v => {
	console.log("promise:", v)
})

改用 async/await 形式如下：

function takeLongTime() {
	return new Promise(resolve => {
		setTimeout(() => {"..模拟耗时操作.."}, 1000);
	});
}

async function test() {
	const v = await takeLongTime();
	console.log(v);
}

test();

以上两段代码中，两种调用方式对异步调用的处理（实际就是对 Promise 对象的处理）差别并不明显，甚至使用 async/await 还需要多写一些代码，那它的优势到底在哪？

四、async/await 优势在于处理 then 链

单一 Promise 链并不能发现 async/await 的优势，但是，如果需要处理由多个 Promise 组成的 then 链的时候，优势就能体现出来了（Promise 通过 then 链来解决多层回调的问题，现在又使用 async/await 来进一步优化它）。

假设一个业务流程，分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。仍然用 setTimeout 来模拟异步操作：

function takeLongTime(n){ 
	return new Promise(resolve => {
		setTimeout(() => resolve(n + 200),n);
	}
);

function step1(n){
	console.log(`step1 with ${n}`); 
	return takeLongTime(n);
}

function step2(m, n){
	console.log(`step2 with ${m} and ${n}`); 
	return takeLongTime(m +n);
}

function step3(k, m, n) {
	console.log(`step3 with ${k}, ${m} and ${n}`); 
	return takeLongTime(k + m + n);
}

Promise 方式处理异步：

function doIt(){
	console.time("doIt"); 
	const time1 =300; 
	step1(time1) 
		.then(time2 => { 
			return step2(time1,time2) 
		.then(time3 => [time1,time2,time3]); 
	}) 
	.then(times => { 
		const [time1, time2,time3] = times; 
 		return step3(time1,time2,time3);
	}
	.then(result =>{ 
		console.log(`result is ${result}`); 
		console.timeEnd("doIt"); 
	}); 
} 
	
doIt(); 

async/await 方式处理异步：
最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它