TIL no.43 - 비동기 처리 async await : JavaScript

 

async await 는 자바스크립 비동기 처리 문법 중 하나입니다.

콜백함수나 프로미스 보다도 간결하게 사용될 수 있다는 점에서 유용하게 사용할 수 있습니다.

 

async 는 await를 무조건 필요로 하며 최근에 async를 쓰지 않아도 await를 사용할 수 있다고는 하나 아직 모든 부분에 적용되지는 않는 것 같습니다.

함수 앞에 async를 붙이며 비동기 처리를 해야하는 코드 앞에 await를 붙입니다.

비동기 처리 메소드가 꼭 Promise를 반환하는 것에만 await를 사용할 수 있습니다.

일반적으로 axios 같은 Promise를 반환하는 API 호출 함수에 await를 많이 사용합니다. 

 

저도 이번에 기업협업에서 하는 프로젝트에서 axios로 API를 호출하는 함수에서 async await을 많이 사용했습니다.

const getPostData = async () => {
    const newPostData = await getPost(pageNum.toString());
    setPostData([...postData, ...newPostData.slice(offset, offset + LIMIT)]);
    setOffset(offset + LIMIT);
  };

게시글 데이터를 가져오는 함수로 함수앞에 async를 적고 

비동기 처리를 할 함수에 await를 붙입니다.

newPostData 를 먼저 거친 후에 그 다음 함수들이 처리됩니다.

 

 

async와 await의 예외 처리하는 방법으로는

try catch 를 사용할 수 있습니다.

 

Promise에서 예외 처리를 위해 catch를 사용했듯이 비슷한 방법으로 사용됩니다.

async function getLoginSuccess() {
try {
	const user = await fetchUser();
  	if (user) {
    const list = await fetchList();
    console.log(list.items);
    }
  } catch(error) {
  console.log(error)
  }
}

콘솔에 에러를 찍어봄으로써 에러를 파악할 수 있다.