async await

1. async await 사용 이유

1.1 정의

2. async

2.1 async function 사용 방법

2.1.1 함수 선언식

async function planet() {
	return "🌎";
}

// .then()으로 바로 호출 가능
planet().then(console.log);

function planet() {
	return Promise.resolve("🌎");
};

planet().then(console.log);

2.1.2 함수 표현식

let planet = async function () {
	return "🪐";
};

planet().then(console.log);

let planet = async () => {
  return "🪐";
};

planet().then(console.log);

3. await

3.1 await 사용 방법 및 특징

3.2 promise.all 병렬 처리

async function 햄버거세트(){
	const 철수 = await new Promise(resolve => setTimeout(() => resolve('햄버거🍔'),4000));
	const 영희 = await new Promise(resolve => setTimeout(() => resolve('감자튀김🍟'),3000));
	const 길동 = await new Promise(resolve => setTimeout(() => resolve('콜라🍷'),2000));
  console.log([철수,영희,길동]);
}
햄버거세트();
// (3) ['햄버거🍔', '감자튀김🍟', '콜라🍷']
// 앞선 비동기 처리를 기다린 후 처리하기 때문에 약 9초 뒤 나옴

async function 햄버거세트(){
	const res = await Promise.all([
		new Promise(resolve => setTimeout(() => resolve('햄버거🍔'),4000)),
		new Promise(resolve => setTimeout(() => resolve('감자튀김🍟'),3000)),
		new Promise(resolve => setTimeout(() => resolve('콜라🍷'),2000)),
	]);
	console.log(res);
}

햄버거세트();
// (3) ['햄버거🍔', '감자튀김🍟', '콜라🍷']
// 여러 개의 비동기 처리를 병렬 처리 하기 때문에 약 4초 뒤 나옴

async function 순차적으로(n){
  const A = await new Promise(resolve => setTimeout(()=> resolve(n+10),2000));
  const B = await new Promise(resolve => setTimeout(()=> resolve(A+20),4000));
  const C = await new Promise(resolve => setTimeout(()=> resolve(B+30),3000));
  console.log([A,B,C]);
}

순차적으로(10);
// (3) [20, 40, 70]
// 약 9초뒤 나옴 

4. 예제

4.1 then 지옥을 탈출해 보자

function timer(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function getPants() {
  await timer(1000);
  return '👖';
}

async function getShirts() {
  await timer(1000);
  return '👚';
}

async function getShoes() {
  await timer(1000);
  return '👟';
}

1. getShirts()를 호출해 shirts를 입는다.

2. getPants()를 호출해 pants를 입는다.

3. getShoes()를 호출해 shoes를 신는다.

function readyToGo() {
  return getShirts().then(shirts => {
    return getPants().then(pants => {
      return getShoes().then(shoes => 
        `${shirts} + ${pants} + ${shoes}`
      )
    })
  })
}
readyToGo().then(console.log)

async function readyToGo() {
  const shirts = await getShirts();
  const pants = await getPants();
	const shoes = await getShoes();
  return `${shirts} + ${pants} + ${shoes}`;
}
readyToGo().then(console.log)

4.2 실용 예제

function fetchUser() {
  fetch("https://jsonplaceholder.typicode.com/users/5")  // 5번 사용자의 정보 요청
    .then((res) => res.json())
    .then((json) => console.log(json));
}
fetchUser();

function fetchUser() {
 return fetch('https://jsonplaceholder.typicode.com/users/5')
  .then((response) => response.json())
}

async function getUserNumber() {
  const user = await fetchUser();
  if (user.id === 5) {
    console.log(user.phone);
  }
}
getUserNumber();  
// (254)954-1289 출력

5. 에러 처리

5.1 try catch

try {
	setTimeout(() => {
		throw new Error('에러!');
	}, 2000);
} catch (err) {
	console.error(err);
}

1. setTimeout 함수가 호출되어 콜스택에 들어간다.

2. setTimeout 함수가 타이머 함수를 호출해 콜백 함수 호출을 스케줄링한다.

1. 호출 스케줄링을 한 setTimeout 함수는 콜 스택에서 제거(pop)된다.

2. 2초가 지나면 타이머가 종료되고 콜백 함수가 태스크 큐로 들어가서 대기한다.

1. 콜스택이 비어있으니 이벤트 루프에 의해 콜 스택으로 들어가서 실행된다.

2. 에러가 실행되지만 호출자가 존재하지 않아 에러를 전파할 수 없다.

const example = async() => {
	try {
		const response = await axios.post(url, {
			"user": {
				"email": email,
				"password": password
			},
		});
	} catch (err) {
		console.error(err);
	}
};