async / await

fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
  .then((result) => { console.log(result); });

위 코드를 async와 await을 사용하는 코드로 바꿔보면 다음과 같으며, 위 코드와 동일하게 동작한다.

async function fetchAndPrint() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const result = await response.text();
  console.log(result);
}

fetchAndPrint();

async는 asynchronous의 줄임말로, 비동기를 의미한다.

즉, 함수 안에 비동기적으로 실행될 부분이 있다는 것을 의미하는 것이며, 그 비동기적으로 실행되는 부분이 await이 붙은 코드들이다.

위 코드에서, await이 작성된 곳을 잘 보면, 두 개의 await 모두 promise 객체를 리턴하는 코드 앞에 붙어있는 것을 확인할 수 있다.

await은 바로 뒤에 오는 코드를 실행하고, 그 코드가 리턴하는 promise 객체가 fulfilled 또는 rejected 상태가 될 때까지 기다려준다.

promise 객체가 fulfilled 상태가 될 경우, 그 작업 성공 결과를 추출하여 리턴한다.

정리하자면, async가 붙어있는 함수 안에 비동기 실행이 되는 부분이 있다는 뜻은, 함수의 코드 중에서 promise 객체를 리턴하는 코드가 있다는 뜻이며, 이러한 코드 앞에 await을 붙여서 promise 객체가 fulfilled 또는 rejected 상태가 될 때까지 기다려주는 것이다.

💡 await 키워드는 async 함수 안에서만 사용이 가능하다.

1. async / await 실행 원리

아래 예시 코드에 대한 결과를 예측해보자.

async function fetchAndPrint() {
  console.log(2);
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  console.log(7);
  const result = await response.text();
  console.log(result);
}

console.log(1);
fetchAndPrint();
console.log(3);
console.log(4);
console.log(5);
console.log(6);

코드를 출력해보면 1부터 7까지의 숫자가 차례대로 출력되는 것을 확인할 수 있다.

코드를 순서대로 따라가보면, 먼저 console.log(1)이 실행되고, 이후 fetchAndPrint 함수가 실행되면서 console.log(2)가 실행될 것이다.

이후, await을 만나게 되는데, 이 경우, 그 뒤의 코드인 fetch('https://jsonplaceholder.typicode.com/users')를 실행하고, 코드의 실행 흐름이 fetchAndPrint()로 가게 된다.

코드의 실행 흐름이 함수 바깥으로 옮겨졌기 때문에, 다음으로 console.log(3)부터 console.log(6)까지 순서대로 실행된다.

이렇게 바깥 코드가 다 실행된 후에는 await 문이 있던 promise 객체가 fulfilled 상태가 될 때까지 기다린 후, promise 객체의 작업 성공 결과인 response 객체를 추출해서 리턴한다.

이후, 그 다음 코드인 console.log(7)이 실행된 후, 다시 await 키워드를 만나게 되어, response.text() 코드 실행 후에, 실행 흐름을 함수 밖으로 옮기지만, 함수 밖에는 더 이상 실행할 코드가 없기 때문에, 다시 함수 안으로 돌아와서 text method가 리턴하는 promise 객체가 fulfilled 상태가 될 때까지 기다린다.

text method가 리턴하는 promise 객체가 fulfilled 상태가 되면, 그 작업 성공 결과인 실제 response의 내용이 result에 할당되고, 마지막으로 console.log(result)가 실행되면서, 코드 실행이 끝나게 된다.

실제로 출력해보면, 아래와 같은 결과가 나오게 되는데, 잘 보면 중간에 undefined가 출력된 것을 볼 수 있다. 이는, fetchAndPrint 함수의 두 번째 await문에서 함수 밖으로 실행 흐름이 옮겨졌지만, 아무런 리턴값이 없었기 때문에 출력된 값이다.

2. async 함수가 리턴하는 Promise 객체

async가 붙은 함수는 항상 promise 객체를 리턴한다.

예를 들어, 아래와 같은 코드가 있다고 했을 때, async 함수가 붙어있는 fetctAndPrint 함수는 3을 작업 성공 결과로 가진 fulfilled 상태의 promise 객체를 리턴한다.

async function fetchAndPrint () {
  return 3;
}

fetchAndPrint();

아래와 같이, async가 붙은 함수 안에서 promise 객체를 리턴하는 경우에는, then method가 리턴하는 promise 객체의 상태와 동일한 상태 및 동일한 작업 성공 결과를 가진 promise 객체가 리턴된다.

좀 더 쉽게 설명하자면, then method가 리턴한 promise 객체를 fetchAndPrint가 그대로 리턴한 것이다.

async function fetchAndPrint () {
  return fetch('https://jsonplaceholder.typicode.com/users')
  .then((response) => response.text())
}

fetchAndPrint();