why?

코드만 보면 동기적으로 실행되는 것 처럼 보이나(가독성 증대 효과!) 손쉽게 비동기 처리 가능 (promise/then) 의 단점(콜백지옥) 개선 가능!!!

사용법

//promise
function fetchUser() {
    return new Promise((resolve, reject) => {
        resolve("gyong");
    });
}

//async
async function fetchUser() {
  //어어어어어어어어어어엄청 오래걸리는 작업
    return "gyong";
}
const user = fetchUser();
user.then(console.log);

• async만 앞에 붙여주면 그냥 promise가 return되어 버린다!!(완전 편함)
• 코드의 간결성, 가독성 모두 UP!
• 이렇게 작성하면 동기적으로 코드를 작성한것 처럼 보이지만, 원하는 작업을 비동기적으로 처리할 수 있다는 점!

await

await는 async내에서만 사용 가능하다!
말로 풀어보자면 await를 붙여준 작업이 끝날때까지 기다려준다는 의미!

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

async function getApple() {
    await delay(2000);
    return "apple";
}

async function getBanana() {
    await delay(1000);
    return "banana";
}

function getFruits() {
    return getApple().then((apple) => {
        return getBanana().then((banana) =>
            console.log(`${apple}이랑 ${banana}`)
        );
    });
}

• 위의 코드에서 await 구문을 보면, delay 함수를 실행시킬때까지 기다려줄께에~ 라고 이해하면 된다!
• getFruits() 함수를 보면 여전히 콜백함수의 chaining으로 인한 콜백지옥이 펼쳐지고 있는 것을 알 수 있다 ㅠㅠ

이를 async를 활용해 깔끔하게 바꿔보쟈!!

async function getFruits(){
  const applePromise = await getApple(); //2초
  const bananaPromise = await getBanana();// 1초
  return `${applePromise}랑 ${bananaPromise}`;
}

• 가독성이 훨씬 좋아졌지만, 여기에도 문제점이 존재한다!
• apple, banana를 가져오면서 코드가 순차적으로 실행되 2초+1초 = 총 3초가 소요된다.
• 이를 해결하기 위한 손쉬운 api가 존재한다!

Promise.all()

async function getAllFruits() {
    return Promise.all([getApple(), getBanana()]).then((fruits) =>
        fruits.join(" & ")
    );
}

getAllFruits().then(console.log);

• promise.all()을 사용하면 배열로 데이터를 return해주는데, 이를 then으로 받아 string으로 가공해준 코드이다.
• promise.all()을 사용하면 위에서는 총 3초가 걸리던 것을, 2초에 모두 불러올 수 있다!

promise.race()

그럼 둘 중 먼저 불러온 데이터를 사용하고싶다면 어떻게 처리할 수 있을까!

async function getFirstFruit() {
    return Promise.race([getApple(), getBanana()]).then((fruit) =>
        console.log(fruit)
    );

• 불러오는데 더 시간이 적게 걸리는 banana가 출력되는 걸 알 수 있다!