Async/Await를 try/catch 없이 사용하기

Async/Await 사용할 때 try/catch문 없이 사용 할 수 있을까요?

아래의 코드를 개선하여 각각 에러처리도 가능하면서 try/catch 구문에서도 빠져나가 봅시다.

function fetchAndUpdatePosts() {
  fetchPosts()
    .then((posts) => {
      updatePosts(posts)
        .catch((err) => {
          console.log('error in updating posts');
        });
    })
    .catch(() => {
      console.log('error in fetching posts');
    });
}

포스트를 패치하고 나서 업데이트 하는 구문인데 패치할 때 catch에 걸릴 수도 있고 업데이트할 때 catch에 걸릴 수도 있습니다.

 

우선 async/await를 사용하여 개선해봅시다.

async function fetchAndUpdatePosts() {
  let posts; 
  
  try {
    posts = await fetchPosts();
  } catch {
    console.log('error in fetching posts');
  }
  
  if (!posts) {
    return;
  }
  
  try {
    await updatePosts();
  } catch {
    console.log('error in updating posts');
  }
} 

posts를 선언하고 await를 posts에 담은 상태로 실행하는데 posts가 catch에 걸려서 값이 안담기게 되면 리턴됩니다.

통과가 되면 다시 한번 updatePosts를 실행합니다. 

하지만 여전히 코드는 개선할 여지가 있습니다.

왜냐하면 단순히 Posts만 담는게 아니라 그 안에 다른 코드들을 작성할 수도 있기 때문에 가장 가까운 catch문으로 떨어지는 것에 가까워질 수 있기 때문입니다.

async 함수로 선언된 모든 함수는 명시적으로 return이 없더라도 promise를 리턴하므로 Promise.prototype.catch에 접근하여 결합할 수 있습니다.

async function fetchAndUpdatePosts() {
  const posts = await fetchPosts().catch(() => {
    console.log('error in fetching posts');
  });
  
  if (posts) {
    doSomethingWithPosts(posts);
  }
} 

명시적으로 미리 포착하고 나머지 코드들을 아래에서 호출 할 수 있게 됩니다. 

그리고 doSomethingWithPosts 함수에서 어떤 일이 발생하면 fetchPosts catch 블록에 포함되지 않으므로 오류를 개별적으로 처리할수도 있습니다.

 

 

출처 : itnext.io/async-await-without-try-catch-in-javascript-6dcdf705f8b1