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)
  }
}