async await

• es2017 도입
• 프라미스 기반의 비동기 코드를 동기적 코드처럼 작성 할 수 있게 합니다.
• await 키워드는 async 키워드로 선언된 함수 안에서만 사용

에러

UnhandledPromiseRejection 에러 메세지 확인

찾아보니

1. asnyc/await을 사용한 함수는 promise를 반환한다는 것을 알게되었다.
2. async 키워드를 사용한 함수의 경우 try catch 로 애러 핸들안해줘서 발생

then/catch 사용

axios.get('https://api.test.com/data').then((response) => {
  if (response && response.data){
   axios.getget('https://api.test2.com/data').then((res) => {
       setData({
        classification:res.data,
        donation:response.data
        });
    });
  }
})

then/catch는 프로미스 체이닝을 사용해서 순차적으로 비동기 작업을 수정할 수 있습니다 첫 요청이 성공하면 다음 요청을 수행

async/await 사용

const load =  async () => {

  try {
    const response = await axios.get('https://api.test.com/data');
    if (response && response.data) {
      const res = await axios.get('https://api.test2.com/data');
      setData({
        classification: res.data,
        donation: response.data
      });
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

async/await는 비동기 코드를 동기 코드처럼 작성할 수 있어서 직관적 await 을 사용해 프로미스가 해결될 때까지 기다리며 try catch 로 블록을 사용해 에러처리 async/await 디버깅시 스택 트레이스 제공

• async/await 와 then/catch 혼합해서 사용 비추

const load = async () => {
  try {
    const response = await axios.get('https://api.test.com/data')
      .then(response => {
        // .then 블록 안에서 또 다른 비동기 요청을 처리
        return axios.get('https://api.test2.com/data').then(res => {
          setData({
            classification: res.data,
            donation: response.data
          });
          return res;
        });
      });
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

await 사용시 비동기 작업을 동기적으로 작성할 수 있어서 마치 동기 코드처럼 보입니다

반면 then 은 비동기 체이닝을 사용한 구문입니다

해당 부분이 코드를 읽는 사람이 혼란스러울 수 있습니다. 두가지 비동기 처리 방식을 이해하고 신경 써야 하기 때문에 가독성을 떨어뜨립니다 try catch 와 then 이후 catch 등 중복 사용된다면 정확히 어디서 에러가 처리되는지 알 수 없습니다

• try...catch...finally

--> async/await와 try...catch...finally를 사용하는 것이 더 적합

예외 상황 처리 (try...catch):

try...catch 블록을 사용하면 코드 실행 중 발생하는 예외(오류)를 즉시 감지하고 처리할 수 있습니다. 만약 DonationCollectService.updateCollectDonation나 DonationService.registerDonation 호출 중에 예기치 않은 오류가 발생하더라도, catch 블록에서 이를 잡아내어 처리할 수 있습니다. 이를 통해, 오류가 발생했을 때 코드가 중간에 멈추는 것을 방지하고, 이후의 로직을 정상적으로 처리할 수 있게 됩니다. 후속 작업 보장 (finally):

finally 블록은 try 블록에서 예외가 발생하든 그렇지 않든, 무조건 실행됩니다. 이 블록을 통해, 비동기 작업의 성공 여부와 관계없이 setLoading(false), reset(), onClose(), reload()와 같은 후속 작업이 반드시 실행됩니다. 따라서, 예외가 발생해도 로딩 상태 해제나 폼 리셋 등 중요한 후속 작업이 누락되지 않고, UI가 안정적으로 유지됩니다. 유효성 검사 오류 예방:

예외 상황이 적절히 처리되지 않으면 예상치 못한 데이터 상태가 발생할 수 있으며, 이는 유효성 검사 라이브러리(async-validator)에서 오류로 이어질 수 있습니다. try...catch...finally를 통해 비정상적인 데이터 상태를 초래할 수 있는 예외 상황을 예방하고, 안정적인 데이터 처리를 보장함으로써 유효성 검사 오류가 발생할 가능성을 줄였습니다.