[JavaScript] 비동기 흐름 제어 -2 : async / await 활용하기

[JavaScript] 비동기 함수 제어 : 콜백함수, promise, async / await

↑ 위 글에서 이어지는 글 ↑ 

async / await을 활용해보자!

async / await 문법은 ES2017에 도입된 최신 문법이다. 코드만 보면 프로미스를 사용하지 않는 것처럼 보일 수 있지만, 사실은 프로미스를 사용하는, promise의 syntactic sugar 라고 할 수 있다. 이 문법을 사용하면 비동기 코드를 마치 동기 코드인 것처럼 활용할 수 있다! 

 

• 우선 이 코드는 프로미스를 이행하여 이를 리턴하는 함수이다. filePath라는 이름으로 파일 주소를 받아와 이를 fs 모듈 readFile 메서드에 전달한다. 해당 메서드로 로컬 파일의 내용을 읽어올 수 있다.

const getDataFromFilePromise = filePath => {
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, 'utf-8', (err, data) => {
      if (err) {
        reject(err);
      }
      resolve(data);
    });
  });
};

• 다음은 각기 다른 데이터로 위 함수를 실행하여 해당 결과를 한번에 리턴하는 비동기 함수이다.

const readAllUsersAsyncAwait = async () => {

  const user1 = await getDataFromFilePromise(user1Path).then(data => JSON.parse(data));
  const user2 = await getDataFromFilePromise(user2Path).then(data => JSON.parse(data));

  return [user1, user2];
};

눈여겨볼 점은 함수 표현식 앞에 붙은 async 키워드와 내부 프로미스에 붙은 await 키워드 이다.

 

먼저 async 키워드는 비동기 asynchronous를 의미하고 있다. 즉 이 키워드가 붙은 함수는 백그라운드에서 비동기적으로 동작한다는 의미이다. async 키워드가 붙은 함수는 언제나 프로미스를 리턴한다.

위 함수에서는 배열에 user1, user2 변수를 이행 결과값으로 하는 프로미스를 리턴하고 있다!  

 

그리고 각 프로미스 앞에 붙은 await 키워드를 보자. await이라는 단어는 '기다리다' 라는 의미가 있다. 무엇을 기다리는 것일까? 바로 뒤에 오는 프로미스의 이행을 기다리는 것이다. 앞서 비동기 코드를 동기적 코드인 것 처럼 활용할수 있다- 고 한 의미는 바로 이것이다.

await이 붙은 비동기처리가 이행되었을 경우에만 다음 코드를 실행할 수 있기 때문에 비동기 코드를 순차적으로 제어할 수 있다.

 

잠깐, 코드의 실행을 멈추는 거라면 동기적으로 작동하기 때문에 비동기가 아닌 다른 모든 코드들의 실행을 블록킹하는 것이 아닌가? 라고 생각할 수 있는데, 그렇지 않다. async 가 붙은 함수 안에서는 이 코드들도 비동기적으로 즉, 백그라운드에서 동작하기 때문에 다른 코드들의 실행을 블록킹하지 않는다. async 키워드 안의 프로미스에 await 키워드가 붙었다고 다른 모든 코드가 기다리는 것이 아니라, 그 프로미스를 기다리는 동안 다른 일들을 할 수 있는 것이다. 

 

추가적으로, await 키워드가 붙은 프로미스가 성공적으로 이행되었을 때, user1과 user2에 담기는 값은 무엇일까? 바로 각 프로미스의 result 결과값이 담기게 된다. 리턴문 안의 [user1, user2]의 의미는 두개의 프로미스를 담아서 리턴하는 것이 아니라, 해당 프로미스의 결과값만 모아 새로운 프로미스로 리턴한다는 의미이다. 

 

+ async await 에서 에러핸들링은 try...catch 문을 사용하는데, 이는 추후 더 공부해서 추가할 예정이다...! 

 

참고 자료

https://ko.javascript.info/async-await

async와 await