Javascript-async/await

async / await

ES8(ECMAScript 2017)에서는 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다.

async/await은 프로미스를 기반으로 동작하며, async / await을 사용하면 promise의
then catch finally 후속 처리 메서드에 콜백 함수를 전달하여
비동기 처리 결과를 후속 처리할 필요 없이 마치 동기 처리처럼 promise를 사용할 수 있다.
프로미스의 후속 처리 메서드 없이 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있다.

Promise를 사용한 api호출

const fetch = require('node-fetch');
const url = 'https://jsonplaceholder.typicode.com/todos/1';
const fetchTodo = () => {
  fetch(url)
    .then(res => res.json())
    .then(console.log)
    .catch(err => console.log(err.response))
}

async/await을 사용한 api호출

const fetch = require('node-fetch');
const url = 'https://jsonplaceholder.typicode.com/todos/1';
const fetchTodo = async () => {
  const res = await fetch(url);
  const data = await res.json();
  console.log(data);
}

async 함수와 await 키워드

await 키워드는 반드시 async 함수 내에서만 사용 되어야 하며, async 함수는 promise를 반환하지 않더라도, 암묵적으로 반환값을 resolve 하는 프로미스를 반환한다.
await 키워드는 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다. await 키워드는 반드시 프로미스 앞에서 사용해야 한다.

const fetch = require('node-fetch');

const getGithubUserName = async id => {
  const res = await fetch(`https://api.github.com/users/${id}`);
  const { name } = await res.json();
  console.log(name);
};

getGithubUserName('aaron'); // 'aarron Kim'

위와 같이 await 키워드는 프로미스가 settled 상태가 될 때까지 대기한다. 따라서 fetch 함수가 수행한 http 요청에 대한 서버의 응답이 도착하여 fetch 함수가 반환한 프로미스가 settled 상태가 될 때까지 res 변수 컨텍스트에서 대기하며, 이후 프로미스가 settled 상태가 되면 프로미스가 resolve한 처리 결과가 res 변수에 할당 된다.
이처럼 await 키워드는 다음 실행을 일시 중지시켰다가 프로미스가 settled 상태가 되면 다시 재개한다.

이러한 async/await 문은 자바스크립트 뿐만 아니라 c#, python 등의 언어에서도 존재한다. 상세한 기능이나 구현 방법은 다르지만 비동기 동작을 동기처럼 작동하게 하는 부분에서 일맥상통 한다.