함수 호출할 때마다 async-await을 계속 써야되는지 궁금점 ( 'await 키워드를 두 번 연속으로 사용해도 괜찮을까?')

궁금한점

API를 분리하여 QuizPage에서 가져다가 쓰고 있는 상태이다. 하지만 이런 의문점이 든다. API분리 시점에서 이미 async/await을 처리해줬는데 굳이 또 QuizPage안에 있는 handleClickOnBtn 함수 안에서 다시 async/await 처리를 해줘야하나 ? 라는 의문점이 들었다.

import { api } from '../api';

export const postAnswer = async (corretIc: boolean) => {
try {
const quizId = sessionStorage.getItem('quizId');
const userId = !sessionStorage.getItem('userId')
? 1
: sessionStorage.getItem('userId');
const { data } = await api.post(`/api/v1/quiz/${quizId}/solve/${userId}`, {
  answer: corretIc ? 1 : 0,
});
// correctIC 나 failIC 를 눌렀을 떄 둘 다 true가 뜨는데 correctIC 조건 처리를 왜 하는지 모르겠다.
const { correct } = data.data;
return correct;
} catch (error) {
throw new Error(String(error));
}
};

const handleClickOnBtn = async () => {
try {
const res = await postAnswer(correctIc);
console.log(res);
navigate('/result');
} catch (error) {
throw new Error(String(error));
}
};

handleClickOnBtn에서 postAnswer 을 불러오고 있는데, handleClickOnBtn 에서 또 다시 async/await을 사용해야하나 ? 라는 질문

해결방법

postAnswer 함수가 비동기 함수이기 때문

postAnswer 함수는 async 함수로 정의되어있다. 이는 Promise를 반환하는 함수를 의미.

await postAnswer사용하여 비동기 함수가 완료될 때까지 기다리고, 그 결과 값을 반환받을 수 있다.

만약 await를 사용하지 않으면 postAnswer 함수는 즉시 Promise 객체를 반환.

await 말고 Promise의 try,catch 메서드 사용가능, 하지만 가독성이 떨어짐.

try,catch 로 대안

바꿔서 사용은 가능하다. 하지만 코드 가독성을 떨어뜨림으로 async/await을 사용하자

const handleClickOnBtn = () => {
  postAnswer(correctIc)
    .then((res) => {
      console.log(res);
      navigate('/result');
    })
    .catch((error) => {
      throw new Error(String(error));
    });
};