🐇 Javascript async/await

🐇 javascript async/await

✔ 들어가면서..

저번시간에 배운 Promise에 이어 새로운 비동기 처리 문법인 async/await에 대해서 짚고 넘어가려고합니다. Promise에 대한 정보가 필요하다면 이 글을 참고해주세요!
JavaScript promise object

✔ async/ await 사용법

• ES7(2017)에 추가된 문법 입니다.
• callback, Pormise 비동기처리의 단점을 보완하고, 개발자가 읽기 좋은 코드를 작성할 수 있도록 사용됩니다.
• 비동기함수 앞에 async를 붙여주게 된다면, 순서대로 처리하게 됩니다.
• await는 async를 사용한 함수 안에서 결과를 받을때까지 기다리고 싶을 때 사용하게 됩니다.
• 사용방법은 아래와 같습니다.

1. 비동기 처리될 전체 함수앞에 async를 붙여줍니다.

   async function 함수명(){
     ...            
   }

2. 결과를 리턴받는 함수 앞에 await를 붙여줍니다.

   sync function 함수명(){
     변수명 = await 함수명();
     ...
   }           

   ❗ await 키워드는 async 함수에서만 유효합니다.
   ❗ 만약 Promise가 await에 넘겨지면, await은 Promise가 fulfill되기를 기다렸다가, 해당 값을 리턴합니다.
   ❗ async 함수는 항상 promise를 반환합니다. 함수의 반환값이 명시적으로 promise가 아니라면 암묵적으로 promise로 감싸집니다.

✔ async/ await 기본 예제

자!! 한번 예제를 살펴볼까요? 여기 setTimeout을 이용한 비동기 함수가 두개 있습니다.

function getApple(){
    setTimeout(()=>{
        console.log('🍎')
    },3000);
}
function getBanana(){
    setTimeout(()=>{
        console.log('🍌')
    },1000);
}
getApple();
getBanana();
//console
//🍌 1초
//🍎 1+2초=3초

다들 예상한 결과겠죠? banana가 먼저 나오게 됩니다. getApple함수가 앞에 있더라도 비동기 처리가 되면서 delay시간이 더 짧은 바나나가 먼저 출력되게 됩니다. 하지만 만약, 꼭 사과가 먼저 도착하길 원한다면 비동기 처리방식인 promise를 사용했었죠? 일단 그방식을 이용해 아래 코드를 작성해 보았습니다!

//promise 적용 후
function getApple(){
    return new Promise((resolve) => {
        setTimeout(()=>{
            resolve('🍎');
        },3000);
    })
}

function getBanana(){
    return new Promise((resolve) => {
        setTimeout(()=>{
            resolve('🍌');
        },1000);
    })
}
//-------------수정할 부분⬇
getApple()
    .then((apple)=>{console.log(apple)})
    .then(()=>{getBanana()
        .then((banana)=>{console.log(banana)})})
//console창 4초후 출력
//🍎 3초
//🍌 3초+1초

promise를 통해 비동기처리! 즉, 동기화해준 상태라고 볼수 있습니다. getApple함수를 처리하고 난 후 리턴값을 출력하고, 그리고나서 getBanana함수를 호출하고 리턴값을 출력하게 되니 위와 같이 결과가 나오게 됩니다.
만약, async를 이용하게 된다면 어떻게 코드를 작성할 수 있을까요?

//async 적용 후
//-------------수정된 부분⬇
async function fetchFruits(){
    const apple = await getApple();
    console.log(apple);
    const banana = await getBanana(); 
    console.log(banana);
    return [apple, banana] 
}
fetchFruits().then((fruits) => console.log(fruits));
//console
//🍎 3초
//🍌 3초+1초
//[ '🍎', '🍌' ] 3초+1초 바나나 출력후 바로

이와같이 코드를 한줄 한줄 위에서 아래로 차례대로 실행한다는 느낌을 줍니다!
코드가 짧아서 체감이 안될 수 있지만, 만약 .then().then() ... .then().catch()으로 길게 늘여진다면, 코드가 복잡해 가독성이 떨어질 수 있습니다.
실무에서는 서버에서 데이터를 요청하고, 기다리고, 받고나서 데이터를 처리하고, 기다린 후 리터값을 가져와 가시화하거나 다른 함수에 매개변수로 활용되기도 합니다!

MDN
류정원강사님 강의자료