[JS] async/await

Fleuve·2020년 11월 14일
1
post-thumbnail

async/await

프로미스가 콜백 헬을 해결했지만, 여전히 코드가 깁니다. 혹은 Promise를 콜백 헬을 해결하기 위해 사용을 했지만 잘못 사용하면 프로미스 헬이 만들어지기도 합니다.

async/await는 프로미스를 사용한 코드를 깔끔하게 줄여주고 프로미스 헬을 보완하기 위해 ES2017에 나온 문법입니다.

//Promise
const findAndSaveUser = (Users) => {
 Users.findOne({})
  .then(user => {
    user.name = 'fleuve';
    return user.save();
  })
  .then(user => {
    return user.findOne({gender : 'm'});
  })
  .catch(error => console.error(error));
}

//async/await
const findAndSaveUser = async (Users) => {
  try {
    let user = await Users.findOne({});
    user.name = 'fleuve';
    user = await user.save();
    user = await Users.findOne({gender : 'm'});
  } catch (error) {
    console.error(error);
  }
}

위 예제를 보면 콜백이 깊지는 않지만 async/await을 사용했을 때 코드의 길이가 눈에 띄게 줄어들었고 코드의 가독성도 좋아 진 것을 볼 수 있습니다.
그리고 Promise에서는 then과 catch를 통해 에러를 잡아냈지만 async/await에서는 try/catch를 사용하여 에러를 잡는 차이가 있습니다..

async/await에서 Promise.all메서드 대체하기

async/await에서는 for문을 사용하여 Promise.all을 대체 할 수 있습니다.
Peomise.all대신 for await of 문을 사용해서 프로미스를 반복할 수 있습니다.

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');

(async () => {
 for await(promise of [promise1, promise2]) {
   console.log(promise); // ['성공1', '성공2']
 }
})();

1개의 댓글

comment-user-thumbnail
2020년 11월 29일

아, 저는 정말 왜 저렇게 promise랑 async가 계속 이해가 안되고 잊어버리는지 모르겠어요.. 매번 볼때마다 새로워요! 증말ㅠㅠㅠㅠㅠㅠ

답글 달기