async & await

async 와 await 은 비동기 코드를 작성하는 새로운 방법이다.
function 키워드 앞에 async 를 붙이고 function 내부의 Promise 를 반환하는 비동기 처리 함수 앞에 await 을 붙이면 된다.

async/await 은 Promise 기반이다.
또한, Promise 보다 비동기 코드의 겉모습을 더 깔끔하게 만든다는 장점이 있다.

Promise 와 async/await 의 차이를 코드를 통해 살펴보자

Promise 구현

예시 #1

function makeRequest() {
    return getData()
        .then(data => {
            if(data && data.needMoreRequest) {
                return makeMoreRequest(data)
                  .then(moreData => {
                      console.log(moreData);
                      return moreData;
                  }).catch((error) => {
                      console.log('Error while makeMoreRequest', error);
                  });
            } else {
                console.log(data);
                return data;
            }
        }).catch((error) => {
          console.log('Error while getData', error);
        });
}

예시 #2

function findAndSaveUser1(Users) {
    Users.findOne({})
        .then((user) => {
            user.name = 'kim';
            return user.save();
        })
        .then((user) => {
            return Users.findOne({gender: 'm'});
        })
        .then((user) => {
            // 생략
        })
        .catch(err => {
            console.error(err);
        });
}

async/await 구현

예시 #1

async function makeRequest() { 
    try {
      const data = await getData();
      if(data && data.needMoreRequest) {
          const moreData = await makeMoreRequest(data);
          console.log(moreData);
          return moreData;
      } else {
          console.log(data);
          return data;
      }
    } catch (error) {
        console.log('Error while getData', error);
    }
}

예시 #2

async function findAndSaveUser(Users) {
    try{
        let user = await Users.findOne({});
        user.name = 'kim';
        user = await user.save();
        user = await Users.findOne({gender: 'm'});
        // 생략
 
    } catch(err) {
        console.error(err);
    } 
}

정리

function 앞에 async 을 붙여주고, Promise 앞에 await 을 붙여주면 된다.
await 을 붙인 Promise 가 resolve 될 때까지 기다린 후 다음 로직으로 넘어가는 방식이다.

추가로 공부하기

function 앞에 async 키워드를 추가하면 두 가지 효과가 있다.

1. 함수는 언제나 Promise 를 반환한다.
2. 함수 안에서 await 를 사용할 수 있다.

Promise 앞에 await 키워드를 붙이면 자바스크립트는 Promise가 처리될 때까지 대기한다. 처리가 완료되면 조건에 따라 아래와 같은 동작이 이어진다.

1. 에러 발생 – 예외가 생성(에러가 발생한 장소에서 throw error 를 호출한 것과 동일함)
2. 에러 미발생 – Promise 객체의 result 를 반환

async/await 를 함께 사용하면 읽고, 쓰기 쉬운 비동기 코드를 작성할 수 있다.
async/await 를 사용하면 Promise.then/catch 가 거의 필요 없다.

await 을 사용하기 위한 2가지 조건도 유의하자.

1. 일반함수엔 await 을 사용할 수 없다.
   async 함수가 아닌데 await 을 사용하면 문법 에러가 발생한다.

	function f() {
    	let promise = Promise.resolve(1);
	    let result = await promise; // Syntax error
    }

즉, await 는 async 함수 안에서만 동작한다.

2. await 는 최상위 레벨 코드에서 작동하지 않는다.

	// 최상위 레벨 코드에선 문법 에러가 발생함
	let response = await fetch('/article/promise/chaining/user.json');
    let user = await response.json();

그러나, 익명 async 함수로 코드를 감싸면 최상위 레벨 코드에도 await 를 사용할 수 있다.

	async( () => {
    	let response = await fetch('/article/promise-chaining/user.json');
	    let user = await response.json();
    })();