async/await

async函数

申明函数时在function前面加上关键字async，如下

async function test1(){
	return 1;
}
test1().then((res)=>{
	console.log(res);//打印1
});

async function test2(){
	return new Promise((resolve)=>{
		resolve(1)
	});
}
test2().then((res)=>{
	console.log(res);//打印1
});

总结：async函数总是返回一个promise对象，如果函数有return，但是返回的不是promise对象，没关系，JavaScript会把这个返回值包装成promise的resolved方法的参数。

await函数

await关键字只能在async函数内使用

async function test() {
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve('done!'), 2000)
	})
	let result = await promise
	console.log(result)
}
console.log(1);
test();
console.log(1);

---------------------------------------------------
控制台打印：
1
1
done!
---------------------------------------------------

总结：await修饰一个promise对象，表示程序执行到这里需要先等这个promise执行完成，才能继续。

异常处理

如果promise正常resolve，那么await会返回resolve的值，如果promise走了reject的逻辑，就会抛出一个错误。

async function test() {
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => reject('done!'), 2000)
	})
	let result = await promise
	console.log(result)
}
test()
----------------------------
控制台打印：
Uncaught (in promise) done!
----------------------------

所以有必要try catch一下

async function test() {
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => reject('done!'), 2000)
	})
	try{
		let result = await promise
		console.log(result)
	}catch(e){
		console.log("error",e)
	}

}
test()
----------------------------
控制台打印：
error done!
----------------------------

//或者在外面调用async函数的时候catch也行
async function test() {
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => reject('done!'), 2000)
	})
	let result = await promise
	console.log(result)
}
test().catch((error)=>{
	console.log("error",error)
})
----------------------------
控制台打印：
error done!
----------------------------

实战篇

//1.用Promise.all并行处理多个异步操作
async function test(){
	let res = await Promise.all([
		fetch("1"),
		fetch("2"),
		fetch("3")
	]);
	console.log(res);
}
test();
function fetch(data){
	return new Promise((resolve)=>{
		setTimeout(()=>{
			resolve(data)
		},2000);
	});
}
----------------------------
控制台打印：
(3) ["1", "2", "3"]
----------------------------
//注意：如果调用fetch的时候promise对象走了reject的逻辑，则整个Promise.all都会垮掉，直接抛出异常

//2.需要循环处理一个数组里的数据，且必须等前一个元素处理完了，才能接着处理第二个元素
async function circle() {
  let arr = [{}, {}, {}];

  for (let item of arr) {
    await promiseFuc(item)
  }
}

转载于:https://my.oschina.net/u/2425353/blog/3081339