[JS] async, await

https://jjaong34.tistory.com/40

자바스크립트 Promise

저번 포스팅에서 Promise를 알아보았는데

 

이번엔 프로미스를 객체로 반환하는 async, 프로미스를 기다리기 위해 사용하는 await 키워드에 대해 알아보려고 한다.

 

# async

함수를 만들 때 키워드를 사용하면 비동기 함수로 만들어준다.

 

async function Fn() {
	return aaa;
}

 

화살표 함수

const Fn = async () => {
	return aa;
}

기본 함수일 때는 function 키워드 옆에 적고

화살표 함수일 때는 매개변수 옆에 적는다.

 

return 은 promise 이다.

그렇기 때문에 promise 객체를 따로 선언해줄 필요가 없다.

 

Fn()
.then(()=>{
	
})
.catch(()=>{

})

바로 then, catch를 통해 사용이 가능하다.

 

그렇다면 return으로 .then일 때를 나타낸다면 

.catch 일때는 어떤 키워드로 나타내는가?

 

바로 throw 키워드이다.

 

const Fn = async () => {
	throw "err";
	return "ok";
}

 

 

# await

비동기를 동기처럼 작동하게 한다고 이해하면 된다.

동기 코드를 보면 그냥 위에서 부터 순차적으로 내려오는걸로 해석하면 되는데

await 키워드가 바로 그 역할을 해준다.

 

색을 바꾸는 함수로 예를 들면

 

const colorChange = (color, delay) => {
	return new Promise((resolve, reject) => {
    	setTimeout(() => {
        	document.body.style.backgroundColor = color;
            resolve();
        }, delay)
    })
}

const wait = async () => {
	await colorChange('red', 1000);
    	await colorChange('orange', 1000);
    	await colorChange('yellow', 1000);
        return "End";
}

then 을 사용 할 필요도 없고

async와 await 키워드만 있으면 프로미스가 끝날 때 까지 기다리기 때문에

동기식으로 연결되는 것처럼 할 수 있고 마지막에 return 으로 작업이 끝난 것도 알 수 있다.

 

그렇다면 실패의 경우에는 어떻게 해야하나?

try ~ catch 가 다시 등장한다.

 

const wait = async () => {
	try{
        	// 실행
        }catch{
        	// 실행에서 오류가 발생했을 때 처리
        }
}

 

try에서 처리를 하는 도중 Promise에서 reject(실패)가 발생한다면

catch문이 동작해서 error 상태를 처리한다.

 

여기까지 프로미스를 좀 더 간편하게 활용할 수 있는

async, await 키워드에 대해 알아보았다.