• 지난번에 프로젝트를 하면서 비동기에서 비동기를 호출해서 undefined가 되는 이슈가 생겼었다. 옆에 친구가 Async Await과 Promise.all을 사용해서 도와줬었다. 똑같은 이슈가 발생을 해서 오늘은 내가 해결을 해보았다.

코드수정전

// Controller
router.get('/:email', (req, res) => {
  console.log('결과1');
  res.json(UserService.getUserByEmail(req.params.email));

});

// UserService
const getUserByEmail = (email) => {
  console.log('결과2');
  return UserRepository.getUserByEmail(email);
}

// UserRepository
const getUserByEmail = (email) => {
  const user = User.find({email: email})
  .then((user) => {
      console.log('결과3');
      return user;
    });
  .catch((err) => console.err(err));
}

//result
결과2
결과1
결과3

• UserRepository에서 응답을 받고, UserService로 넘기고 Controller에서 응답을 해줘야되는데, UserRepository애서 비동기 응답으로 인해 그냥 undefined가 리턴이 되어서 값이 안나왔다.
• 해결하기 위해서는 UserRepository에서 결과가 나올때까지 기다려야됬다. promise와 async awiat을 이용하기로 했다.

코드수정후

// Controller
router.get('/:email', (req, res) => {
  const result = UserService.getUserByEmail(req.params.email);
  result
    .then((user) => {
      res.json(user);
    })
    .catch((err) => res.end(err));
});

// UserService
async function getUserByEmail(email) {
  const user = await UserRepository.getUserByEmail(email);
  return user;
}

// UserRepository
async function getUserByEmail(email) {
  const user = User.find({email: email});
  console.log(user);
  return user;jae
}

• getUserByEmail함수를 함수선언식으로 변경을 하고 async를 붙임으로서 async함수로 선언을 했다. 함수표현식이나 화살표 함수를 사용하고 싶었는데, 우선은 급한대로 함수선언식으로 해결을 했다.
• UserService의 getUserByEmail에서 await을 붙여서 UserRepository에서 응답이 올때까지 기다린다. 그리고 return을 해준다.
• Controller에서 응답이 오면 res.json으로 응답을 해주고, 아니면 에러를 res.end를 해주는 형태로 반환을 했다.

느낀점

• 그래도 전에 비슷한 경험이 있어서 console.log(‘결과’);를 찍어봤을때 비동기처리에 대해서 알 수 있었다. 지난번에는 비동기 이슈가 발생했을때 Promise가 필요해서 promise에 대해서 학습을 했는데, 이번에는 비동기 이슈가 async await으로 활용해서 한번 적용해 볼 수 있어서 좋았다.
• 또한 함수표현식과 화살표함수에서 async를 어떻게 쓰는지도 찾아보게 되었다. ``` const foo = async () => { // do something }

var add = async function(x) { // async function 표현식을 변수에 할당 var a = await resolveAfter2Seconds(20); var b = await resolveAfter2Seconds(30); return x + a + b; };

```

• 위의 형태로 개션을 해보아야겠다.