Async/await

DOYOUNG KIM·2023년 11월 10일
0

Async/await


제로초님이 말했던 then 지옥 틀린 것은 아니지만 이 코드도 가독성 차원에서는 좋지 않음
이걸 해결 하는 것이 Aysnc/await이다.

※어싱크 발음이 아니라 에이싱크 발음이 맞다고 함

아래 코드가 프로미스 지옥의 예시 코드 이다.
콜백처럼 깊이가 깊어지지 않지만 then이 계속 반복 되는 문제인데
이걸 async/await로 바꿔보자

//promise hell sample
function findAndSaveUser(Users) {
  Users.findOne({})
    .then((user) => {
      user.name = 'zero';
      return user.save();
    })
    .then((user) => {
      return Users.findOne({ gender: 'm' });
    })
    .then((user) => {
      // 생략
    })
    .catch(err => {
      console.error(err);
    });
}

변수 await 프로미스; 인 경우 프로미스가 resolve 된 값이 변수에 저장된다.
변수 await 값;인 경우에 그 값이 변수에 저장된다.

//async/await
async function findAndSaveUser(Users){
  let user = await Users.findONe({});
  user.name = 'zero';
  user = await user.save();
  user = await Users.findOne({gender ; 'm'});
}

실행 순서가 오른쪽에서 왼쪽으로 간다.
프로미스는 findOne에서 then으로 이동하지만(동작순서가)
await 는 User.findOne에서 user로 간다.
await를 사용하려면 function 앞에 무조건 async 필요

async function main(){
  const result = await promise;
}

main()

그러나 최근에는 탑레벨 await으로 async 강제 X

아래 코드와 같은 경우는 어떨까
단순하게 return 하나만 추가되었지만 then이 필요
프로미스의 성격을 동일하게 가지고 있기 때문에 반환이 필요하면 아래와 같이 name을 받아줘야 한다.
그럼 async에서 실패하면 어쩌냐 try catch로 사용한다.

async function main(){
  const result = await promise;
  return 'doyoung'
}
main().then((name)) => ...)
const name = await main();

간단한 예제를 한번 더 보겠다.

async 함수는 항상 promise를 반환한다
then / await를 붙일수 있다.
아래 예시 처럼 then으로 해도 await를 해도 가능하다.
나는 C#을 사용해서 사실 await를 붙여서 반환 받는게 나름 편하다.

async function findAndSaveUser(Users){
  //생략
}

findAndSaveUser().then(() => {});
async function other(){
  const result = await findAndSaveUser();
}

for await

resolve 된 프로미스가 변수에 담겨 나온다.
await를 사용하기 때문에 async 함수 안에서 해야한다.

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

프로미스 반복을 할때 자주 사용하는 문법이다.

profile
매일 1%씩 성장하는 개발 공부 블로그 입니다.

0개의 댓글