[CS] - async/await

Sean yang~~·2022년 12월 22일
0
post-thumbnail

async & await 는?

async 와 await 는 자바스크립테의 비동기 처리 패턴 중 가장 최근에 나온 문법니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.

async function

async function 선언은 AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise 를 사용하여 결과를 반환합니다. 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 많이 비슷합니다.

async function getnName() {
	return Promise.resolve('tom');
}

getName().then(name => {
	console.log(name)
})

async 함수에는 await 식이 포함될 수 있습니다. 이식은 async 함수의 실행을 일시 중지하고 전달 된 Promise 의 해결을 기다린 다음 async 함수의 실행을 다시 시작하고 완료 후 값을 반환합니다.

async/await 함수의 목적은 사용하는 여러 promise의 동작을 동기스럽게 사용할 수 있게 하고, 어떠한 동작을 여러 promise의 그룹에서 간단한게 동작하게 하는 것이다. promise가 구조화된 callback과 유사한 것 처럼 async/await 또한 제너레이터와 프로미스를 묶는것과 유사하다.

async & await 예외 처리

async & await에서 예회를 처리하는 방법은 try catch 이다. 프로미스에서 에러처리는 위해 .catch() 를 사용했던 것처런 async에서는 catch{} 를 사용하면 된다.

async function logTodoTitle() {
	var user = await fetchUser();
  	if(user.id === 1){
    	var todo = await fetchTodo();
      	consol.log(todo.title);
    }
}

// 예외 처리

async function logTodoTitle () {
	try {
    	var user = await fetshUser();
      	if(user.id === 1) {
        	var todo = await fetchTodo();
          	console.log(todo.title) // delextus aut autem
        }
    } catch (error) {
      console.log(error)
	}
}   

위으 코드를 실행하다가 발생한 네트워크 통신 오류뿐만 아니라 간단한 타입 오류 등의 일반적인 어류까지고 catch 로 잡아낼 수 있습니다. 발견된 에러는 error 객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주시면 된다.

profile
나는 프론트엔드 개발자다!

0개의 댓글

Powered by GraphCDN, the GraphQL CDN