[Async Await] Async와 Await에 대해 알아보자

[Promise] Promise API에 대해 알아보자

지난 시간에는 Promise API에 대해 알아봤다.

기존 비동기 함수를 사용할 때 처리하는 함수로 콜백 함수를 썼지만 콜백안에 또다른 비동기가 들어가는 경우 그리고 안에 다른 콜백이 들어가는 경우 콜백 지옥이 일어날 수 있다고 했다. 

이 콜백 지옥을 풀어주는? 해결해주는? 기능이 Promise API이고 Promise를 좀 더 쉽게 사용할 수 있게 돕는 기능이 오늘 다룰 Async와 Await이다.

---

Async와 await

먼저 async에 대해 알아보자.

async는 함수 앞에 위치한다.

async function dd(){
	return 1
}

dd().then(alert) //1 출력

async function ff(){
	return new Promise((resolve, reject) =>{
    	resolve("44")
    })
}

ff().then(alert) //44출력

async에 덮인 함수는 promise를 반환한다. 

return에 프로미스를 명시했다면 그 프로미스를 반환하고 단순 값이라면 그 값을 promise로 묶어 반환한다. 

그래서 위와 같이 dd함수나 ff함수 모두 then을 이용해 후속 처리를 할 수 있다. 

 

여기서 then을 다시 생각해보자. then은 dd나 ff가 특정 작업을 마치고 결과값을 보내줘야 실행할 수 있었다. 

그러니까 후속 처리를 맡는 역할이다. await가 이 비슷한 역할을 수행할 수 있게 돕는다. 

 

await는 async 함수 안에 위치해야 한다.

const f = async() => {
	const {data} = await fetch("https://jsonplaceholder.typicode.com/todos")
    //...후속 작업
}

const f2 = () => {
	const d = await setTimeout(() => console.log(2), 1000) //에러 발생
}

 만약 await가 async안에 위치해있지 않다면 에러를 일으킨다. 

 

await는 뭘까? 

await의 사전적 의미는 "기다리다" 이다.

즉 await로 지정한 로직의 작업을 마칠 때까지 후속 작업을 중단한다는 의미다! (이게 비동기 작업안에서 중단되어야지 동기 작업 안에서 중단되면 성능 저하를 일으키기 때문에 async안에 그니까 비동기 함수 안에 위치해야 다른 동기 작업이 운영될 수 있어 async안에 위치해야 되는 것 같다.)

await로 지정한 작업이 종료되면 결과에 따라 그 아래에 있는 후속 작업을 진행한다.

const f = async() => {
	try{
            const response = await fetch("https://jsonplaceholder.typicode.com/todos")
            const user = await response.json()
            console.log(user)
    }catch(e){
    	console.error(e)
    }
}

우선 await의 에러 처리는 try catch를 통해 할 수 있다. 작업 중 에러가 발생하면 catch로 넘어가 에러를 일으킨다.

위 코드를 보면 fetch를 다하고 json()함수를 실행한 후 이 두 작업이 끝나면 console.log를 실행한다. 이렇게 async와 await를 사용하면 then을 사용하지 않고도 직관적으로 함수를 표현할 수 있다. 

 

정리하다보니 어느정도 이해가 되간다.

그렇지만 중요한 건 이걸 실전에서 사용할 수 있는지가 중요하다..

나 쓸 수 있겠지..?