• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

async & await 처리 관련 질문드립니다.

21.11.25 14:01 작성 조회수 156

1

안녕하세요!

vue.js 로 프론트 개발하다가 질문이 있어 남깁니다.

컴포넌트에서 props로 함수를 받아 처리하는 부분이 있는데요,

그동안 해당 props는 일반함수로 받고, 받은 props 함수를 처리하는 함수는 async로 처리하고 있었는데,

props로 받는 함수도 Promise 처리해야하는 경우가 생겼습니다.

 

그래서 Promise로 받는 별도의 props를 추가하지 않고 해당 props를 await 처리만 해줘도 괜찮을지 싶은데요,

혹시 Promise가 아닌 일반 함수를 await 붙여준다고 해서 문제가 있을까요?

테스트를 해보니 오류나 순서상의 문제 없이 정상 동작하는 것 같아 질문드립니다.

문제가 될 경우 이유와 어떻게 처리하면 될지 좋은 예시도 함께 알려주시면 감사드리겠습니다.

 

다음은 현재 질문 상황에 대한 예시 코드입니다.

// 일반 함수
const printNum = (number) => {
  console.log(number);
};
    
// Promise
const logPrintNum = async (number, delaySec) => {
  console.log(`Enter logPrintNum ${number}`);
  await printNum(number);  // 일반 함수를 await 처리
  console.log(`Exit  logPrintNum ${number}`);
};

// 호출부
logPrintNum(1, 0);

// 출력 결과
Enter logPrintNum 1
1
Exit  logPrintNum 1

답변 1

답변을 작성해보세요.

0

안녕하세요 날쌘돌이님, await는 프로미스를 반환하는 코드 앞에서만 사용하셔야 합니다. 그렇지 않으면 비동기 순서가 의도대로 보장되지 않을 거예요. 아래 글 참고하세요 :)

https://joshua1988.github.io/web-development/javascript/js-async-await/

답변 감사드립니다!

await는 Promise를 반환하지 않는 코드 앞에 쓰면 순서가 보장되지 않는다는 말씀이시군여,,

저도 이게 Promise를 반환하는 함수와 그렇지 않은 함수를 동일하게 처리하면 안된다는 건 느낌적으로 알겠는데, 이유를 알고 정확히 이해해서 사용하고 싶어서 구글신을 열심히 뒤졌는데 원하는 답변을 찾지 못했습니다..ㅠㅠ

경험적으로 알기 위해 테스트 해봤을 때는 20번 했을 때 20번이 의도한 순서대로 나왔거든요! @-@

그래서 캡틴판교신님께 질문드렸습니다!

혹시 이유를 설명해주실 수 있으실까요?