async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다.

---

async

function getName() {
	return "Mike";
}

• 다음과 같은 함수가 있다고 가정해보자 , 이 함수 앞에 async 라는 키워드를 붙여주게 되면
  해당 함수는 항상 promise를 반환하게 된다.

async function getName() {
	1) return Promise.resolve("Tom");
  	2) throw new Error("err...");
}

console.lig(getName()); 
-> 출력해보면 Promise라고 콘솔창에 나옴.


그렇다면 then을 이용할 수 있다.

1)
getName().then((name)=> {
	console.log(name);
});

2)
getName().catch((name)=> {
  	console.log(err);
});

---

await

await 키워드는 async 함수 내부에서만 사용할 수 있다.

function getName(name) {
	return new Promise((resolve, reject) => {
     	setTimeout(() => {
          resolve(name);
        },1000);
    });
}

async function showName() {
 	const result = await getName('Mike');
  	console.log(result);
}

-> 다음과 같이 작성하면 getName 이라는 프로미스의 결과가 반환될 때 까지 기다렸다가 
console.log 함수를 통해 출력을 해준다!

async / await 적용해보기

const f1 = (message) => {
	return new Promise((res,rej)=>{
      setTimeout(function() {
        res("1번 주문 완료");
      },1000);
    });
};
const f2 = (message) => {
  	console.log(message);
	return new Promise((res,rej)=>{
      setTimeout(function() {
        res("2번 주문 완료");
      },3000);
    });
};
const f3 = (message) => {
  	console.log(message);
	return new Promise((res,rej)=>{
      setTimeout(function() {
        res("3번 주문 완료");
      },2000);
    });
};

console.log("시작");
f1
.then(res => f2(res))
.then(res => f3(res))
.then(res => console.log(res));
.catch(console.log)
.finally(()=>{
	console.log("끝");
})

해당 코드는 지난 시간 프로미스를 이용하여 작성했던 코드이다. 이를 async / await 를 이용해 수정해보겠다.

console.log("시작");
async function order() {
  	try {
      const result1 = await f1();
      const result2 = await f2(result1);
      const result3 = await f2(result2);
      console.log(result3);
    }catch(e){
    	console.log(e);
    }
  	console.log("종료");
}

order();

-> 다음과 같이 수정할 수 있다. reject 처리를 위해서는 try-catch문으로 감싸주면 된다.