[React] axios, async-await 사용시 try-catch 주의점(catch-비즈니스 로직 x)

axios 를 이용해 API통신을 하는 코드를 작성중, 

catch에서는 비즈니스 로직을 태우면 안된다는 코드리뷰를 받았다. 

리뷰 등록에대한 비즈니스로직으로 사용자의 요청을 처리하고 결과를 제공하는 로직인

if (!values?.content) {

        alert('내용을 작성해주세요.');

   }

이런 if else 가 예외를 처리하는 catch에서 쓰여지면 안된다는 것이다.

catch에서는 종료되어 끝나야 한다.

 

▼ ❌ 수정 전 코드

try{
    if (data.data.code === 200) {
        alert('등록완료');
        setValues({ content: '' });
      }
} catch (err) {
  if (values?.content === '') {
    alert('내용을 작성해주세요.');
  } else {
    alert('등록이 실패되었습니다.');
  }
}

 

 

▼ 🔵 수정 후 코드

• catch에서 if else문 빼기
• 로직은 순서에 맞게 배치해야한다.
  • const data = await doSubmit(body); =>API 통신 전에 빈칸일때 '내용을 작성해주세요' if문이 검사되어야 하기에, API통신 위로 빈칸if문 배치
• 위와 같은 다른 로직이기에 연결된 if else if가 아닌 다른 if문으로 빈칸if문 작성 (*return으로 꼭 끝내줘야 다른 catch문으로 넘어가지 않는다! 이걸 안했더니 alert창이 내용작성, catch오류로 2개 띄워짐/계속 if else if하면 계속 돌아가서 느려진다고도 함)

 

1차 수정) x

 

2차 최종수정) O  위 피드백을 반영하여 적용되었다.

 

위 2차 수정 코드임

const formDoSubmit = async () => {
    try {
      const body = {
       id: id,
       review: values?.content,
      };

      if (!values?.content) {
        alert('내용을 작성해주세요.');
        setIsModalOpen(false);
        return; //!꼭 끝내줘야 함/ API통신 전이기에 위로 배치
      }
      const data = await doSubmit(body); //API 통신

      document.documentElement.style.overflow = 'auto';

      if (data.data.code === 200) {
        alert('등록되었습니다. 감사합니다.');
        setValues({ content: '' });
      } else {
        alert('등록 실패되었습니다.');
      }
      setIsModalOpen(false);
    } catch (err: any) {
      alert('오류로 인해 전송이 실패했습니다.');
    }
  };