2023-05-26 TIL

• JavaScript

🔸 async / await 

 

function fetchEgg(chicken) {
  return Promise.resolve(`${chicken} => 🥚`);
}

function fryEgg(egg) {
  return Promise.resolve(`${egg} => 🍳`);
}

function getChicken() {
  return Promise.reject(new Error('can not find 🐓'));
}

// Promise
getChicken()
  .catch(() => '🐔')
  .then((chicken) => fetchEgg(chicken))
  .then((egg) => fryEgg(egg))
  .then((meal) => console.log(meal))
  .catch((error) => console.log(error));

 

Promise 의 형태인 이것을 async / await 를 활용해 좀더 깔끔하게 비동기 방식을 활용하려고 바꾸려 해보았다.

 

먼저 첫번째 만난 오류.

/Users/hoonsworld/Desktop/Sparta/Dream/test.js:28
  return Promise.reject(new Error('can not find 🐓'));
                        ^

Error: can not find 🐓
    at getChicken (/Users/hoonsworld/Desktop/Sparta/Dream/test.js:28:25)
    at fryEggFromChicken (/Users/hoonsworld/Desktop/Sparta/Dream/test.js:38:27)
    at Object.<anonymous> (/Users/hoonsworld/Desktop/Sparta/Dream/test.js:45:1)

 

오류메세지는 친절하다. 어디에 왜 오류가 났는지를 알려주니까 (내가 못한거란걸 팩폭.. 컴퓨터는 거짓말을 하지 않는다. 사람이 잘못이지)

 

왜인가 하니, getChicken() 에서 resolve 를 보내는 것이 아닌 reject를 보내주고 있었고, 그래서 당연히 에러가 발생했던 것이다.

닭을 찾을수 없다 나오기에, 그 오류를 잡아서 '🐔' 으로 데이터 값을 할당해주는걸 제대로 확인을 안했었다. 그래서 다시금 코드 변경.

 

async function fryEggFromChicken(){
    const chicken = await getChicken().catch(()=>'🐔');
    const egg = await fetchEgg(chicken);
    const getFryEgg = await fryEgg(egg);

    return `${chicken}=>${egg}=>${getFryEgg}`
}

여기서 2번째 오류.

이 오류는 내가 아직 Promise의 흐름과 비동기식 데이터 흐름을 제대로 이해하지 못하고 있단 증거였다.

Promise는 정상 처리(resolve)가 되었을 경우와 에러 발생(reject)의 경우 처리 방식이 다른데 위 코드를 보게 되면

return에 ${}, ${}, ${} 으로 또 각각의 변수들을 호출해주고있다.

 

애초에 반환되는 데이터들을 이해하고 그게 중첩적으로 쌓이고 있다는걸 인식을 못해서 생긴 문제.

 

즉 마지막 하나 getFryEgg 만을 반환 해주면 정상적으로 처리 되는 문제였다.

 

 

👉 최종 정리

async function fryEggFromChicken(){
    const chicken = await getChicken().catch(()=>'🐔');
    const egg = await fetchEgg(chicken);
    const getFryEgg = await fryEgg(egg);

    return getFryEgg;
}

fryEggFromChicken()
    .then((data)=>console.log(data));

 

출력 데이터

 

🐔 => 🥚 => 🍳

 

👉 Promise의 흐름, async / await 를 이해했으며, 추후 데이터 값들을 어떻게 비동기식으로 처리할지에 대한 고민이 필요할것 같다.