1. fetch

아래 코드의 실행 결과를 예상해보자.

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

console.log('End');

아마 이전에 fetch 함수를 공부해보지 않은 사람이라면, Start!가 먼저 출력되고, 그 뒤에 response의 내용, 그리고 그 뒤에 End가 출력될 것으로 예상할 것이다.

하지만, 직접 코드를 실행해보면, 아래와 같이 Start!와 End가 연이어 출력되고, 그 이후에 response의 내용이 출력되는 것을 확인할 수 있다.

이렇게 실행 결과가 나오는 이유는, fetch 함수에 비동기 실행이 되는 부분이 있기 때문이다.

fetch 함수는 request를 보내고 Promise 객체를 리턴한 후에, 그 객체의 then method로 콜백 함수를 등록하며, 이 콜백 함수는 서버로부터 response를 받았을 때 실행된다.

이후, fetch 함수의 두 번째 줄에 있는 then method도 동일한 방식으로 콜백 함수를 등록하며, 이 때 등록한 두 번째 콜백 함수는, 첫 번째 then method의 콜백 함수가 실행되어야 그 다음에 실행이 되는 구조이며, 첫 번째 콜백 함수의 리턴값을 넘겨받게 된다. (이 말이 이해가 되지 않는다면, 해당 글을 먼저 보고오자.)

여기서, 주의헤야 할 부분은, 두 개의 then method는 콜백 함수를 등록만 할 뿐, 바로 실행하는 게 아니라는 점이다.

then method가 콜백을 등록하고 나면, 바로 그 다음의 console.log가 실행된다.

이후, 서버의 response가 도착하게 되었을 때, then method로 등록해두었던 콜백 함수들이 순서대로 출력되면서, response의 내용이 마지막으로 출력되는 것이다.

다시 정리하자면, 위 코드의 실행 순서는 다음과 같다.

• console.log('Start!')가 실행된다.

• fetch 함수가 request를 보내고 Promise 객체를 리턴한 후에, 그 객체의 then method로 콜백 함수를 등록한다.

• console.log('end')가 실행된다.

• 서버의 response가 도착하면, then method로 등록해두었던 콜백 함수들이 순서대로 실행되어, response의 내용이 출력된다.
  
  

이와 같이, 특정 작업을 시작하고 완벽하게 다 처리하기 전에 실행 흐름을 다음 코드로 넘기고, 이후 콜백이 실행되는 것을 비동기 실행이라고 한다.

반대로, 일반적으로 우리가 코드를 작성할 때 실행되는 방식을 동기 실행이라고 한다.

그렇다면, 비동기 실행은 왜 필요할까?

결론적으로 이야기 하자면, 동일한 작업을 더 빠른 시간 내에 처리하기 위함이다.

만약 위 코드를 동기실행으로 처리해야 했다면, response가 오기 전에 마지막 줄의 console.log는 실행되지 못한 채로 일시적으로 작업이 중단되므로, 시간을 낭비하는 셈이다.