🤹🏻‍♀️ Javascript

async, await, 즉시 실행 함수

ji-hyun 2022. 4. 26. 09:43

async 코드의 문제는 에러가 발생했을 때입니다. 에러가 나면 어떻게 될까요?

아무 일도 일어나지 않습니다.

 

에러가 났는데 에러가 났다고 말을 안 하면 안 되겠죠? 그래서 generator 시간 때처럼 try catch문으로 감싸서 명시적으로 에러 처리를 해줍니다.

 

 

 

async 함수는 return 또는 throw 값이 담긴 Promise를 리턴합니다. 위의 코드에서는 따라서 then(성공) 또는 catch(실패) 하면 됩니다.

 

const returnPromise = async () => {
  return 'zero';
};
returnPromise().then((res) => {
  console.log(res); // 'zero'
});

 

근데 눈치 채셨나요? Promise를 리턴하기 때문에 이 코드를 다시 await 으로 연결할 수 있습니다.

 

async function another() {
  try {
    let result = await returnPromise();
  } catch (err) {
    console.error(err);
  }
}

 

 

이렇게 할 수 있는거죠.

어떻게 보면 그냥 Promise를 동기식으로 작성하는 것과 다를 바가 없네요.

 

 

 

https://www.zerocho.com/category/ECMAScript/post/58d142d8e6cda10018195f5a

 

https://www.zerocho.com/category/ECMAScript/post/58d142d8e6cda10018195f5a

 

www.zerocho.com

 

 

 

 


즉시 실행 함수 표현식

 

이거 하나만 기억하자.

정의되자마자 즉시 실행되는 함수 표현식을 말한다.

 

 

즉시 실행 함수 표현식은 async / await 비동기 처리를 바로 사용할 때 사용한다.

 

(async () => {
... 코드1
await promise();
... 코드2
})();

 

 

 

 

 

const { resultMessage, winningPrize } = await drawGeneralPrize(prisma, prismaRO);



// 아래 함수의 반환 타입
export type DrawPrizeType = Promise<{
  resultMessage: string;
  winningPrize: LuckyFiRoulettePrize;
  token?: string | null | undefined;
}>;


// drawGeneralPrize 함수
export const drawGeneralPrize = async (
  prisma: PrismaClient,
  prismaRO: PrismaClient,
): DrawPrizeType => {
  const { resultMessage, winningPrize, launchPadId } = await (async () => {
    const launchPad = await prismaRO.luckyFiRoulettePrizeLaunchPad.findMany({
      include: {
        LuckyFiRoulettePrizeBy: true,
      },
    });

    // 런치패드에 상품이 없는 경우.
    if (isEmpty(launchPad)) {
      return {
        resultMessage: "NoMorePrize",
        winningPrize: losePrize,
        launchPadId: -1,
      };
    } else {
      // 일반상품중 가장 앞선 상품을 당첨시킨다.
      const [{ id, LuckyFiRoulettePrizeBy }] = launchPad; 
      // LuckFiRoulettePrizeBy 는 관계필드이다

      return {
        resultMessage: "Success",
        winningPrize: LuckyFiRoulettePrizeBy,
        launchPadId: id,
      };
    }
  })();
  
  
  
  try {
    if (launchPadId === -1) {
      return {
        resultMessage,
        winningPrize,
      };
    } else {
      await prisma.luckyFiRoulettePrizeLaunchPad.delete({
        where: { id: launchPadId },
      });
    }
  } catch (e) {
    console.log(`launchPad delete fail ${JSON.stringify(e, null, 2)}`);
    return {
      resultMessage: "LaunchPadDeleteFail",
      winningPrize: losePrize,
    };
  }

  return {
    resultMessage,
    winningPrize,
  };
};

 

async, await 이렇게 중첩되서 사용할 수가 있다.

 

 

 

 

 

 

const launchPad = await prismaRO.luckyFiRoulettePrizeLaunchPad.findMany({
      include: {
        LuckyFiRoulettePrizeBy: true,
      },
    });


// 위의 launchPad 변수에 마우스를 올려보면
const launchPad: (LuckyFiRoulettePrizeLaunchPad & {
    LuckyFiRoulettePrizeBy: LuckyFiRoulettePrize; // LuckFiRoulettePrize 는 type
})[]

 

findMany 니까 배열로 나온다.

 

 

 

 

 

위의 include 를 select 로 바꾸고 마우스를 올려보면

 

const { resultMessage, winningPrize, launchPadId } = await (async () => {
    const launchPad = await prismaRO.luckyFiRoulettePrizeLaunchPad.findMany({
      select: {
        LuckyFiRoulettePrizeBy: true,
      },
    });


const launchPad: {
    LuckyFiRoulettePrizeBy: LuckyFiRoulettePrize;
}[]

 

 

 

 

 

 

 

 

 

 

'🤹🏻‍♀️ Javascript' 카테고리의 다른 글

[JS] 검색 엔터키  (0) 2022.05.09
[JS] Microtask  (0) 2022.05.08
클로저의 활용 사례  (0) 2022.04.24
async, await  (0) 2022.04.23
[Js] Map, Set 자료형  (0) 2022.04.23