async 와 await 는 자바스크립테의 비동기 처리 패턴 중 가장 최근에 나온 문법니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다.
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에서 예회를 처리하는 방법은 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
객체에 담기기 때문에 에러의 유형에 맞게 에러 코드를 처리해주시면 된다.