async_await

📌 async

💡 프로미스에 then 메서드를 체이닝 형식으로 호출하는 것 보다 가독성을 높일 수 있다.

async function getCode() {
    return “Mike”
} 

• 위와같이 함수앞에 async 키워드를 붙이면 항상 프로미스를 반환한다.

async function getName() {
    return “Mike”;
}

console.log(getName());  // promise { <pending> }

• 프로미스를 반환하는 모습
• 때문에 then 메서드를 사용할 수 있다.

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

getName(“Mike”).then((name) => {
    console.log(name);  // 2초후 - Mike
})

• 함수를 호출하고 then을 사용하여 name이 return되는 모습
• 다시 얘기하자면 then은 프로미스 객체의 result 값을 다음 함수의 인자로 사용 가능 하다.

📌await

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

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

showName();

• await 키워드는 async 가 붙은 함수 내부에서만 사용 가능하다.
• await가 붙으면 해당 함수가 완료될때 까지 기다렸다가 리턴 값을 반환한다.
• result에 2초후에 값이 할당되고 이후에 console.log()에 찍히는 것을 알 수 있다.
• **이는 then을 통한 프로미스 체이닝 보다 가독성을 높인다.

📌 예제

const f1 = () => {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(“1번 주문 완료”);
        }, 1000);
    });
};

const f2 = (message) => {
     console.log(message);
     return new Promise((res, rej) => {
          setTimeout(() => {
               res(“2번 주문 완료”);
          }, 3000);
     });
};

const f3 = (message) => {
    console.log(message)
    return new Promise((res, rej) => {
        setTimeout(() => {
            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(“끝”);
     })

• 위 코드는 프로미스 체이닝을 통해 res 상태에서 result에 할당되는 값을 then을 통해 다음 함수에 전달하는 방식이다.
• 위 코드에서 함수를 호출하는 구문을 async_await 구문으로 리팩토링 해보자

📌 코드 리팩토링

async function order() {
    const result1 = await f1()
    const result2 = await f2(result1);
    const result3 = await f3(result2);
    console.log(result3);
    console.log(“종료”);
}

order();

• order() 가 호출되면 result1에 f1()의 리턴값을 1초 후에 할당한다.
• await 키워드를 사용했기 때문에 다음 구문으로 넘어가지 않는다.
• 이후 result1 값 (“1번 주문 완료”)을 f2() 함수에 넘겨주고 2초 후 result2 변수에 리턴값을 할당한다
• 이후 동일한 로직이며 await 구문이 끝나면 result3로 할당된 값을 console.log()로 찍고 종료까지 찍고 종료된다.

📌 Promise.all

• async_await 구문에서도 Promise.all을 사용 할 수 있다.
• 마찬가지로 배열로 받아 반환한다.