对 async/await 的理解

async/await 的理解

async/await 其实是 Generator 的语法糖,它能实现的效果都能用then 链来实现,它是为优化 then 链而开发出来的。从字面上来看,async 是“异步”的简写,await 则为等待,所以很好理解async用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。当然语法上强制规定 await 只能出现在asnyc 函数中,先来看看 async 函数返回了什么:

async function testAsy() {
	return "hello world;";
}
let result = testAsy();
console.log(result);
Promise {<fulfilled>: 'hello world;'}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: "hello world;"

所以,async 函数返回的是一个 Promise 对象。async 函数(包含函数语句、函数表达式、Lambda 表达式)会返回一个Promise对象,如果在函数中 return 一个直接量,async 会把这个直接量通过Promise.resolve() 封装成 Promise 对象。async 函数返回的是一个 Promise 对象,所以在最外层不能用await 获取其返回值的情况下,当然应该用原来的方式:then()链来处理这个 Promise 对象,就像这样:

async function testAsy() {
	return "hello world;";
}
let result = testAsy();
console.log(result);
result.then(res => {
	console.log(res); // hello world;
})

那如果 async 函数没有返回值,又该如何?很容易想到,他会返回

Promise.resolve(undefined);

联想一下 Promise 的特点——无等待,所以在没有await 的情况下执行 async 函数,它会立即执行,返回一个Promise 对象,并且,绝不会阻塞后面的语句。这和普通返回Promise 对象的函数并无二致。

 注意:Promise.resolve(x) 可以看作是new Promise(resolve=>resolve(x)) 的简写
 可以用于快速封装字面量对象或其他对象,将其封装成 Promise 实例。

async/await 的优势

单一的 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(n) {
	console.log(`step2 with ${n}`);
	return takeLongTime(n);
}
function step3(n) {
	console.log(`step3 with ${n}`);
	return takeLongTime(n);
}

现在用 Promise 方式来实现这三个步骤的处理:

function doIt(n) {
	console.time('doIt');
	const time1 = 300;
	step1(time1)
		.then(time2 => step2(time2))
		.then(time3 => step3(time3))
		.then(result => {
			console.log(`result is ${result}`);
			console.timeEnd('doIt');
		});	
}

doIt();
step1 with 300
step2 with 500
step3 with 700
result is 900
doIt: 1.652s

输出结果 result 是 step3() 的参数 700 + 200 = 900。doIt()顺序执行了三个步骤,一共用了 300 + 500 + 700 = 1500 毫秒,和console.time()/console.timeEnd() 计算的结果一致。如果用 async/await 来实现呢,会是这样:

async function doIt() {
	console.time('doIt');
	const time1 = 300;
	const time2 = await step1(time1);
	const time3 = await step2(time2);
	const result = await step3(time3);
	console.log(`result is ${result}`);
	console.timeEnd('doIt');
}
doIt();
step1 with 300
step2 with 500
step3 with 700
result is 900
doIt: 1.515s

结果和之前的 Promise 实现是一样的,但是这个代码看起来是不是清晰得多,几乎跟同步代码一样

async/await 对比 Promise 的优势

代码读起来更加同步,Promise 虽然摆脱了回调地狱,但是then的链式调⽤也会带来额外的阅读负担

Promise 传递中间值⾮常麻烦,⽽async/await⼏乎是同步的写法,⾮常优雅

错误处理友好,async/await 可以⽤成熟的try/catch,Promise的错误捕获⾮常冗余

调试友好,Promise 的调试很差,由于没有代码块,你不能在⼀个返回表达式的箭头函数中设置断点,如果你在⼀个.then 代码块中使⽤调试器的步进(step-over)功能,调试器并不会进⼊后续的.then代码块,因为调试器只能跟踪同步代码的每⼀步。

你可能感兴趣的:(JavaScript,Promise,web,javascript,前端)