비동기 #3 - Async & Await

Async & Await 은 Promise를 한단계 감싸서 더 보기 편하게 만들어주는 문법

promise chaining 같은 복잡한 체이닝 없이 마치 동기적인 코드를 작성하는 것처럼 간편하게 코드를 작성할 수 있다.

(내부적으로 promise를 쓰기 때문에 promise의 연장선이라 볼 수 있다.)

---

Async

함수를 작성할때 function을 쓰는데 그 앞에 async를 작성해주면 항상 promise를 리턴하는 비동기 함수로 변한다. 

async function getUser() {
	return '윤구';
}

const user = getUser();
console.log(user);

// promise {<fulfilled>: '윤구'}

값을 리턴하는 비동기 함수를 출력해보면 값 대신 promise 객체로 출력되는 것을 알 수 있다.

 

function networkRequest() {
	return new Promise(resolve => {
            setTimeout(() => {
                console.log("데이터를 받아왔습니다.")
                resolve();
            }, 2000);
    	})
}

async function getUser() {
    networkRequest();
    return "윤구";
}

네트워크 요청에 2초가 걸린다고 흉내낸 함수를 만들었다. 

getUser를 실행하면 networkRequest를 실행하고 윤구라는 스트링을 반환하도록 하였다.

하지만 콘솔창에 뜬건 윤구 - 데이터를 받아왔습니다 순.

비동기 작업인 networkRequest를 기다리지 않고 바로 다음 코드인 return으로 넘어갔기 때문이다.

이럴때 사용하는 것이 await.

---

await

위 코드 중 networkRequest를 실행하는 부분 앞에 await을 붙이면 이 작업이 끝날때까지 잠시 함수의 진행을 멈추고 기다렸다가 다 끝나면 다음 줄로 넘어가도록 한다.

async function getUser() {
    await networkRequest();
    return "윤구";
}

 

이처럼 async 함수 내 어떤 비동기 함수가 완료되길 기다려야 한다면 그 앞에다가 await을 붙인다. 

promise가 완료될 때까지 기다려주는 역할.

 

async function getUser() {
    await networkRequest();
    await networkRequest();
    await networkRequest();
    return "윤구";
}

promise chaining 처럼 await을 여러 번 사용 가능. promise chaining 보다 더 가독성이 좋아짐.

 

주의 사항

await은 항상 async가 붙은 함수 내에서만 사용 가능하다.