[JavaScript] fetch 함수와 비동기 실행

다음 fetch 함수를 실행시켜보면 다음과 같은 결과가 출력됨.

 

console.log('시작!');

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

console.log('끝!');

 

 

 

console.log('끝!'); 이 fetch 함수보다 먼저 출력되는 것을 확인할 수 있는데, 이는 fetch 함수에 비동기실행이 되는 부분이 있기 때문

---

 

[fetch 함수의 비동기실행]

 

 

1. 1 에서 '시작!' 이 출력

2. fetch 함수가 실행되며 Request를 보내고 어떤 객체를 리턴함. 이 때 3, 4에서 그 객체의 then 메소드로 콜백을 등록하는데, 이 콜백함수는 서버로부터 Response 를 받았을 때 실행됨. 3번 콜백이 실행된 후 이후의 리턴값을 4번 콜백이 넘겨받아 함수가 실행됨.

then 메소드는 콜백함수를 실행하는 것이 아닌 등록하는 역할임

3. 2 에서 끝! 이 출력

4. 서버에 response 가 도착하게 되면, then 메소드로 등록해 놓은 콜백함수가 순서대로 실행되면서 3, 4 순서대로 실행 됨.

 

이처럼 한번 시작된 작업이 완료되기 전에, 다음 코드로 실행이 넘어가고 나중에 콜백이 실행되며 작업이 마무리 되는 것을 비동기 실행이라 함.