[JavaScript] 비동기 async와 await 을 알아보자

❓ async , await

promise는 콜백헬을 제거하는데 유용하다
하지만 promise도 then을 통해 체이닝을 하는데, 복잡하고 코드가 길다.
더 깔끔하게 편리하게 사용하기위함

async

function 앞에 async를 붙여 사용하고 해당 함수는 항상 프라미스를 반환한다. Promise가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 합니다.

async function cook(){ // async를 쓰면 Promise를 리턴하는 함수로 만들어준다.
  return '파스타 맛집'; // resolve 시 파스타맛집 출력한다
}
 
cook().then(console.log); // '파스타맛집' , Promise 객체

async function cook(){ // 
  return Promise.resolve('파스타 맛집'); 
} // 직접 프로미스를 반환하도록 작성해도 결과는 동일함
cook().then(console.log); // '파스타맛집' , Promise 객체

await

await 키워드는 프라미스가 처리될 때까지 기다린다. 결과는 그 이후 반환된다.

function delay(ms){
	return new Promise(resolve => setTimeout(resolve,ms));
}
async function cream() {
	await delay(1000);
    return '크림파스타';
}
async function tomato() {
	await delay(1000);
    return '토마토파스타';
}
tomato().then(console.log);
cream().then(console.log); // 2초뒤 '크림파스타' , '토마토파스타'