특정 작업을 시작(리퀘스트 보내기)하고 완벽하게 다 처리(리스폰스를 받아서 처리)하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고, 나중에 콜백이 실행되는 것.
console.log('Start!');
fetch('https://www.google.com')
.then((response) => response.text())
.then((result) => { console.log(result); });
console.log('End');
위와 같은 코드가 있을 때, fetch
는 비동기 실행을 하는 함수이므로 코드는 아래와 같은 순서로 작동한다.
- console.log('Start');
- fetch 함수(리퀘스트 보내기 및 콜백 등록)
- console.log('End');
- 리스폰스가 오면 2. 에서 then 메소드로 등록해뒀던 콜백 실행
fetch 함수는 다른 함수들과 달리 콜백을 파라미터로 바로 전달받는 게 아니라, fetch 함수가 Promise 객체를 리턴하고, Promise 객체의 then 메소드를 사용해서 콜백을 등록
// 1번
let num = 1;
// 2번
setTimeout(() => {
num = 2;
}, 0);
// 3번
num = 3;
// 4번
console.log(num);
따라서 위와 같은 코드의 실행 순서를 정리하면,
- 변수 num에 정수 1이 할당됨.
- setTimeout 함수에 0밀리초 후에 실행될 콜백 함수(num = 2)가 등록됨.
- 변수 num에 정수 3이 할당됨.
- 정수 3이 출력됨.
- setTimeout 함수에 의해 변수 num에 정수 2가 할당됨.
비동기 실행의 정의에 대입해보자면,
비동기 실행
특정 작업을 시작(리퀘스트 보내기 -> 0밀리초 delay 시키기)하고 완벽하게 다 처리(리스폰스를 받아서 처리 -> num = 2
)하기 전에, 실행 흐름이 바로 다음 코드로 넘어가고(3번, 4번), 나중에 콜백이 실행되는 것(num = 2
)
이므로, 콘솔에 출력되는 값은 2가 아니라 3이 된다.