Async和Await經典使用

1.Array.prototype.includes

const arr = ['a', 1, 3, null, NaN]

if (arr.includes(3)) {
	console.log(true)
}

2.指數運算符

const num = 7 ** 2
console.log(num)

3.Object.values()和Object.entries()

const valObj = {
	name: 'hufei',
	age: 18,
	info: 'Hello ES'
}

console.log(Object.values(valObj))
console.log(Object.entries(valObj))

4.1 async await

// async 和 await
async function getAmount2(userId) {
	var user = await getUser(userId)
	var amount = await getBankBalance(user)
	console.log(amount)
}

getAmount2('1')

function getUser(userId) {
	return new Promise(resolve => {
		setTimeout(res => {
			resolve('join')
		}, 1000)
	})
}

function getBankBalance(user) {
	return new Promise((resolve, reject) => {
		setTimeout(res => {
			if (user == 'join') {
				resolve('2000')
			}
			else {
				reject('unknown user')
			}
		}, 2000)
	})
}

4.2 await處理等待和並行調用

// await處理等待和並行調用
async function doubleAdd(a, b) {
	// c = await doubleAfterSec(a)
	// d = await doubleAfterSec(b)

	[c, d] = await Promise.all([doubleAfterSec(a), doubleAfterSec(b)])
	return c + d
}

doubleAdd(20, 30).then(result => {
	console.log(result)
})

function doubleAfterSec(num) {
	return new Promise(resolve => {
		setTimeout(res => {
			resolve(num * 2)
		}, 1000)
	})
}

4.3 async/await 函數的錯誤處理

• 1.在函數中使用try...catch

async function doubleAndAdd(a, b) {
 try {
  a = await doubleAfter1Sec(a);
  b = await doubleAfter1Sec(b);
 } catch (e) {
  return NaN; //return something
 }
return a + b;
}
//🚀Usage:
doubleAndAdd('one', 2).then(console.log); // NaN
doubleAndAdd(1, 2).then(console.log); // 6
function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}

• 2.捕獲(Catch) await 表達式

async function doubleAndAdd(a, b) {
 a = await doubleAfter1Sec(a).catch(e => console.log('"a" is NaN')); // 👈
 b = await doubleAfter1Sec(b).catch(e => console.log('"b" is NaN')); // 👈
 if (!a || !b) {
  return NaN;
 }
 return a + b;
}
 
//🚀Usage:
doubleAndAdd('one', 2).then(console.log); // NaN  and logs:  "a" is NaN
doubleAndAdd(1, 2).then(console.log); // 6
 
function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}

• 3.捕獲(Catch) 整個async-await函數

async function doubleAndAdd(a, b) {
 a = await doubleAfter1Sec(a);
 b = await doubleAfter1Sec(b);
 return a + b;
}
 
//🚀Usage:
doubleAndAdd('one', 2)
.then(console.log)
.catch(console.log); // 👈👈🏼<------- use "catch"
 
function doubleAfter1Sec(param) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   let val = param * 2;
   isNaN(val) ? reject(NaN) : resolve(val);
  }, 1000);
 });
}