async / await

async, await은 프로미스를 기반으로 동작한다. 이 메서드를 사용하면 프로미스의 then, catch, finally 후속 처리 메서드에 콜백 함수를 전달하여 비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 프로미스를 사용할 수 있다.

 

async function fetchTodo() {
  const url = 'http://~~~~'
  const response = await fetch(url)
  const todo = await response.json()
  console.log(todo)
}

fetchTodo()

 

---

 

async 함수

await 키워드는 반드시 async 함수 내부에서 사용해야 한다. async 함수는 언제나 프로미스를 반환한다. 명시적으로 반환하지 않더라도 암묵적으로 반환값을 resolve하는 프로미스를 반환한다. 유의할 점으로는 클래스의 constructor 메서드는 async 메서드가 될 수 없다.

 

---

 

await 키워드

프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다. 반드시 프로미스 앞에서 사용해야 한다. 

 

---

 

에러처리

async / await 에서 에러처리는 try catch 문을 사용할 수 있다. 콜백 함수를 인수로 전달받는 비동기 함수와는 달리 프로미스를 반환하는 비동기 함수는 명시적으로 호출할 수 있기 때문에 호출자가 명확하다.

 

const foo = async () => {
  try {
    const wrongUrl = 'http://kpl'
    const response = await fetch(wrongUrl)
    const data = await response.json()
    
    console.log(data)
  } catch (e) {
    console.error(e) // TypeError: ~~
  }
}

foo()

 

이 코드의 catch문은 HTTP 통신에서 발생한 네트워크 에러뿐 아니라 try 코드 블록 내의 모든 문에서 발생한 일반적인 에러까지 모두 캐치 가능하다. 만약 async 함수 내에서 catch문으로 에러 처리를 하지 않으면 발생한 에러를 reject 하는 프로미스를 반환한다. 따라서 프로미스 후속 처리 메서드인 catch 메서드를 호출하여 처리가 가능하다.