[JavaScript] async / await 2

에러 처리

• 에러는 호출자(caller) 방향으로 전파
• 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파
• 하지만, 비동기 함수의 콜백 함수를 호출한 것은 비동기 함수가 아니기 때문에 try…catch문을 사용해 에러를 캐치할 수 없음

try{
	setTimeout(()=>{ throw new Error('Error!') },1000)
} catch(e) [
	cosole.log('캐치한 에러',e)
}

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

  const fetch = require('node-fetch')
  const foo = async()=>{
  	try{
  		const wrongUrl = '<https://wrong.url>'
  		const response = await(fetch(wrongUrl)
  		const data = await respone.json()
  		console.log(data)
  } catch(err) {
  		console.log(err) //Type Error : Failed to fetch
  	}
  }
  
  foo()
  

  • foo함수의 catch문은 HTTP통신에서 발ㄹ생한 네트워크 에러뿐 아니라 try 코드 블록 내의 모든문에서 발생한 일반적인 에러까지 모두 캐치 가능
  • async 함수 내에서 catch 문을 사용해서 에러 처리를 하지 않으면 async 함수는 발생한 에러를 rejet 하는 프로미스를 반환

  const fetch = require('node-fetch')
  const foo = async()=>{
  	try{
  		const wrongUrl = '<https://wrong.url>'
  		const response = await(fetch(wrongUrl)
  		const data = await respone.json()
  		return data
  }
  foo()
  	.then(console.log)
  	.cach(console.error) //TypeError:Failed to fetch
  

  • async 함수를 호출하고 Promise.prototype.catch 후속 처리 메서드를 사용해 에러를 캐치

  Reference

  • 이웅모 저, 「모던 자바스크립트 Deep Dive」, 위키북스(2020)