콜백 지옥에서 살아남기 - 02.async, await

비동기적인 요소 중 기본적인 방식으로 콜백 기반 callback-based 비동기 프로그래밍이 있다. 그러나 만약 콜백 함수에 콜백 함수를 계속 중첩하는, 이른바 콜백 지옥의 코드를 작성한다면 문제가 생길 것이다.

가독성이 떨어지기 때문에 문제 발생 시 해당 코드를 다시 봤을 때 디버깅하거나 유지보수하기 어려울 것이며, 다른 개발자와의 소통 역시 어려울 것이다.

그래서 express 프레임워크나 다른 모듈을 로딩할 때 promise, async, await 등의 문법을 사용한다고 생각한다. 보다 효율적인 비동기 방식으로 구현해야 하기 때문!!

그래서 그 개념에 대한 정리는 express를 사용하면서 필수적으로 수행해야 한다고 생각했다.

앞서 promise를 통해 callback의 가독성 문제를 어느 정도 해결했다. 그에 더해, 콜백을 받는 함수를 promise로 반환하는 '프로미스화'를 진행할 때 async, await와 함께 사용할 수 있다.

async & await

async 키워드는 함수 앞에 위치하며 항상 promise를 반환한다.

설령 promise를 반환하지 않더라도 resolve statement로 감싸 promise로 반환할 수 있다.

const f = async () => return 1;
f().then() // 1

await는 async 함수 안에서만 동작한다. 말 그대로, async 함수 안에서 처리되는 동안 실행을 '기다리다가', 처리가 완료되면 실행시키는 역할을 한다.

await는 promise.then() 보다 가독성이 좋고 쉽게 사용할 수 있다고 한다.

다만, async로 감싸지 않은 함수 안에선 실행되지 않는다!!

class 생성

클래스 함수를 생성할 때, 메서드 앞에 async와 await를 사용해 새로운 메서드를 생성할 수 있다.

class Weather {
	async winter() {
    	return await Promise.resolve("so cold");
    }
}

new Weather()
	.winter()
    .then()
    .catch()

에러핸들링

error를 상위 스코프로 던지는 throw 문법 역시 구현할 수 있다.

아래 두 함수는 같은 로직이다.

async function f() {
  await Promise.reject(new Error("에러 발생!"));
} //1)

async function f() {
  throw new Error("에러 발생!");
} //2)

주로 try{...} catch{...} 구문을 사용해 에러핸들링 할 수 있다. 에러가 발생하지 않는다면, promise의 result를 반환한다.

언제 promise를 사용하고, async/await를 사용하나?

async/await을 사용하면 await가 대기를 처리해주기 때문에 promise의 메서드를 사용할 일이 거의 없다. 게다가, 문법의 편리성 때문에 async/await를 사용하는 것이 가독성에 편리하다!

하지만, 문법적 제약으로 인해 await를 사용할 수 없을 때, 굳이 함수를 새로 생성해야 할 필요가 없을 때, 최상위 레벨 코드에서 promise 문법을 활용해 에러를 다룰 수 있다고 배웠다!!

참조

https://ko.javascript.info/async