ES8(2017)에서의 변화

promise의 장점에도 불구하고

수행 순서를 명확히 하는데는 약점이 존재했다.

Users.findOne('zero')
    .then((user) => {
        console.log(user);
        return Users.update('zero', 'nero');
    })
    .then((updatedUser) => {
        console.log(updatedUser);
        return Users.remove('nero');
    })
    .then((removedUsers) => {
        console.log(removedUser);
    })
    .catch((err) => {
    	console.error(error);
    });
console.log('다 찾았니?');

예를 들어 console.log('다 찾았니?');는 findOne보다 먼저 실행되며 그것도 정확히 장담할 수 없다.

그래서 async와 await이 탄생하였다.

 

async와 await은 c#의 generator같은 코루틴(coroutine)개념으로부터

차용하였다.

세미 코루틴이라고 불린다.

 

async func() => {
	const user = await Users.findOne('zero');
    console.log(user);
    const updatedUser = await Users.update('zero', 'nero');
    console.log(updatedUser);
    const removedUser = await Users.remove('nero');
    console.log(removedUser);
    console.log('다 찾았니');
}
func()

이 promise를 async/await으로 바꾸면,

코드 순서와 실행 순서가 같기 때문에

console.log('다 찾았니?')의 실행시점이 정확해진다.

따라서 다른 언어의 흔한 동기식 문법처럼 원하는 지점에서

호출을 하도록 자유롭게 위치 조절이 가능해진다.

 

.then이 없어 깔끔한 장점도 있으나

대신 .catch부분을 try-catch문으로 감싸줘야하는 단점이 있다.

async func() => {
    try {
        const user = await Users.findOne('zero');
        console.log(user);
        const updatedUser = await Users.update('zero', 'nero');
        console.log(updatedUser);
        const removedUser = await Users.remove('nero');
        console.log(removedUser);
        console.log('다 찾았니');
    } catch (err) {
        console.error(err);
    }
}
func()

findOne과 update, remove에 대해 각각 에러핸들링하고 싶은 경우엔 더 보기 안좋아진다.

 

 

---

출처, 참조: https://www.zerocho.com