[JS] async와 await

soyeon·2022년 2월 23일

JavaScript TIL async

TIL

목록 보기

9/32

🎠async와 await

async와 await은 Promise를 좀 더 깔끔하게 쓸 수 있도록 해줍니다.. 그 뿐입니다.
특별한 기능이 딸려있는 게 아님!

🎠async

먼저 async를 쓰기 전 Promise 예제 코드입니다.

function fetchUser() {
    // 네트워크가 대충 잇다치고 10 초후에 soonmac을 출력
    return new Promise((resolve, reject)=>{
        resolve('soonmac');
    });
}

👻Promise가 뭔가요? : 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트입니다.
new Promise((resolve,reject) => {...})

resolve: 정상적으로 잘 작동되어서 데이터를 전달

reject: 실패ㅠㅠ

async를 사용한 코드입니다. 기능하는 건 똑같습니다.

async function fetchUser() {
  return "soonmac";
}

async는 function 앞에 씁니다!
async는 항상 Promise를 반환하는데 Promise가 아닌 값을 반환하더라도 Promise가 이행되어서 resolved된 값으로 쳐줍니다.
Promise 객체 만들어서 resolve 함수를 일일이 써줄 필요가 없음!

🎠await

예제 코드를 봅시다!
await을 쓰기 전의 코드입니다.

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

function getBanana() {
    return delay(3000)
    .then(()=> '🍌')
  // 3초 후(then) 바나나를 반환!
}

then을 써서 delay 함수가 다 끝날 때까지 기다린 후 바나나를 반환하는 getBanana() 함수를 만들었습니다.

await을 사용한 코드입니다.

async function getBanana() {
  await delay(1000);
  //delay 함수가 다 끝날 때 까지 기다림
  return "🍌";
}

✨await은 async 함수 안에서만 작동함!

await은 말그대로 함수가 끝날 때 까지 기다리는 역할을 합니다. then와 같음.
Promise가 처리되는 동안에는 다른 스크립트를 실행하거나 이벤트를 처리하기 때문에(비동기) 안심해도 됨

then으로 이루어진 함수를 await으로 리팩토링하기

먼저 await을 쓰지 않은 코드입니다.

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

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

function pickFruits() {
  return getApple().then((apple) => {
    return getBanana().then((banana) => `${apple} + ${banana}`);
  });
}

먼저 getApple()로 사과를 받고
그 다음 getBanana()로 바나나를 받습니다.
그리고 최종적으로 🍎+🍌사과 + 바나나를 반환합니다.

await을 이용해 pickFruits() 함수를 리팩토링하면..

async function pickFruits() {
    const apple = await getApple();
    const banana = await getBanana();
    return `${apple} + ${banana}`;
    
}

apple이란 상수를 만들어서 getApple()이 끝날 때 까지 기다린 후 사과를 받아오고
같은 방법으로 banana 상수를 만들어서 바나나를 받아옵니다.
그리고 apple + banana를 반환하기!

참 쉽죠?

동시다발적으로 Promise를 실행하기

❓ 사과, 바나나를 순서대로 기다리는 건 너무 비효율적이야... 둘이 동시에 진행 시키면 안돼?

async function pickFruits() {
    const applePromise = getApple();
    const bananaPromise = getBanana();
    // 상수에 할당해서 프로미스 두개 바로 만들게해서 프로미스 안의 코드 진행시키고 
    const apple = await applePromise;
    const banana = await bananaPromise;
    return `${apple} + ${banana}`;   
}

applePromise, bananaPromise 상수에 각각 getXXX() 함수를 집어넣습니다.
이렇게 하면 바로 Promise 객체가 생성되고, Promise 안의 코드가 진행됩니다.
apple과 banana에 동기화해줍니다. Promise가 다 끝날 때 까지 await해줍니다.
합쳐!!

좀 복잡하죠? Promise API를 쓰면 위의 코드를 더 쉽게 쓸 수 있습니다.

🎠Promise API

✨Promise.all - 동시다발적(병렬적)으로 Promise를 실행시키기

function pickAllFruits() {
    //Promise.all 배열에 전달된 프로미스 값이 다 모일 때까지 존버함
    return Promise.all([getApple(), getBanana()])
    .then(fruits => fruits.join(" + "));
}
pickAllFruits().then(console.log)
// 결과값 : 🍎+🍌

🍧Promise.all( [ a, b ] ) : a,b 값이 다 모일 때까지 기다림

✨Promise.race - 가장 빨리 리턴된 값만 전달하기

function pickOnlyOne() {
    //Promise.race : 배열에서 전달된 프로미스 중에서 가장 빨리 리턴된 값만 전달됨
    return Promise.race([getApple(), getBanana()])
}
//참고로 바나나의 딜레이는 1초 사과의 딜레이는 2초다.
pickOnlyOne().then(console.log) 
//결과값 : 🍌