ECMAScript笔记——Async await

Async await 概述

• async是在ES7中提供给异步操作的解决方案，整体基于Promise对象。
• async会返回一个Promise对象，如果在函数中return一个直接量，async会把这个直接量通过Promise.resolve()封装成Promise对象。
• 相较于Promise，async使用await关键字去代替在then()中return Promise对象的链式操作，使代码更简洁，语义更明确。

创建Async函数

• 在function前面加上async关键字，就可以创建一个async函数。

async function a() {
    return 'async';
}

const result = a();
console.log(result);

运行结果：

• async函数返回的是一个Promise对象。

Await的使用

• await操作相当于等待一个Promise对象，并且返回Promise对象的处理结果，如果处理的不是Promise对象，则用Promise.resolve()转化。

let p = Promise.resolve('Success Promise');

async function a(){
	let a1 = await p;
	console.log(a1);
}

a();

运行结果：

可以看到await返回了resolve()的结果。

Async实例

• 通过一个案例明白async与promise的区别。
• 使用setTimeout()，每隔两秒发送一次请求。

promise 写法：

let num = 0;
let timer = setInterval(function(){
	num++;
	console.log(num);
},1000)

function runTimeP(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP Success');
		},2000);
	});

	return timeP;
}

runTimeP()
.then((res) => {
	console.log(res);
	return runTimeP();
})
.then((res) => {
	console.log(res);
	return runTimeP();
})
.then((res) => {
	console.log(res);
	clearInterval(timer);
})

运行结果：

async 写法：

let num = 0;
let timer = setInterval(function(){
	num++;
	console.log(num);
},1000)

function runTimeP(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP Success');
		},2000);
	});

	return timeP;
}

async function a(){
	let a1 = await runTimeP();
	console.log(a1);
	let a2 = await runTimeP();
	console.log(a2);
	let a3 = await runTimeP();
	console.log(a3);
	clearInterval(timer);
}

a();

运行结果：

• async告诉程序是一个异步，await会暂停执行async中的代码，等待await表达式后的结果，跳过async函数，继续执行后面代码。
• Promise的then()只能传递一个参数，虽然可以通过包装成对象来传递多个参数，但是会导致传递冗余信息，频繁的解析又重新组合参数。
• async/await没有这个限制，可以当做普通的局部变量来处理，用let或者const定义的块级变量想怎么用就怎么用，想定义几个就定义几个，完全没有限制，也没有冗余工作。