자바스크립트 비동기 처리 / Promise / async / await / fetch

비동기 처리 구조

자바스크립트는 원래 싱글 스레드 기반 언어이며 동기적으로 실행된다. 호출 스택(Call Stack)이 하나여서 스택 내에 쌓인 작업을 순서대로 처리한다.

 

하지만, 시간이 오래 걸리는 코드가 있으면 그 작업이 끝나고 콜백할 때까지 기다렸다가 다음 작업을 처리하게 된다. 그 시간 동안은 대기해야 하므로 비동기적으로 처리하는 방법이 필요하다.

 

setTimeout() 으로 일정 시간 동안 작업을 지연시키는 예시이다. 이 예제를 실행하면 3초 뒤에 '3초 지연!'이라는 문구를 찍는다.

 

setTimeout(function() {
	console.log('3초 지연!');
}, 3000);

 

지금은 3초짜리 코드이지만, 서버에서 대량의 데이터를 받아오는 등의 처리가 필요할 때는 더 시간이 길어지게 된다. 그 시간 동안 다음 코드를 실행하지 않고 기다리면 사용자도 계속 기다리게 된다.

 

그래서 자바스크립트에서는 비동기 처리를 위해 오래 걸리는 작업들을 넘겨서 처리한다. 비동기 처리를 외부 API 에 위임하고 완료된 작업을 event loop 를 통해 반환 받고 다시 콜백을 실행하여 병렬적으로 비동기 코드를 실행하는 것처럼 보인다. 

 

setTimeout() 은 인자로 받은 콜백 함수를 외부 API에 예약하기만 하고 기다리는 건 원래 코드랑 상관없이 따로 동작한다. 이것이 자바스크립트에서 비동기 작업을 처리하는 방식이다.

 

 

setTimeout 함수가 실행되면 브라우저가 제공하는 Web API 를 호출하고 Call Stack에서 제거한다. 일정 시간이 지난 뒤 끝난 작업을 callback queue에 넣는다. event loop는 call stack을 감시하다가 비어있으면 callback queue에 있는 콜백 함수를 call stack에 넘기고 실행한다. (실제로 setTimeout에 주어진 시간은 callback queue에 들어가는 시간일 뿐 실행까지 걸리는 시간이 아닐 수도 있다.)

 

아래 예시는 setTimeout() 0초, 3초 짜리를 실행했을 때의 코드이다.

 

console.log('11111');
setTimeout(
    function() {
        console.log('22222');
    }
, 0);
setTimeout(
    function() {
        console.log('33333');
    }
, 3000);
console.log('44444');

 

'22222'를 찍는 코드는 0초 지연 후 실행되어야 하지만 외부 API로 위임되고 0초 후 콜백 큐에 들어와 기다리다가 콜 스택이 빈 후에 실행되므로 출력 순서는 '11111' → '44444' → '22222' → '33333'가 된다.

 

 

promise

ES6 부터는 Promise로 비동기 작업을 관리할 수 있다.

콜백이 아닌 Promise를 사용하는 것이 좋은 이유는 여기를 참고하세요. 

 

참고로 Promise는 비동기 처리를 하지만 callback queue가 아닌 job queue를 사용하고 이는 callback queue보다 높은 우선순위를 가진다.

 

비동기 작업을 생성하는 방법이다. Promise 생성자는 인자로 executor 함수를 받으며 Promise 객체를 반환한다.

executor 함수는 resolve, reject 두 개의 인자를 가지고 이들도 모두 호출할 수 있는 함수이다. 작업에 성공할 경우 resolve, 실패할 경우 reject를 호출하며 이에 따른 작업을 지정할 수 있다.

 

const promise = new Promise((resolve, reject) => {
	// 처리할 비동기 작업
});

 

비동기 작업이 끝난 이후에 해야 할 작업을 지정하려면 성공했을 때는 then(), 실패했을 때는 catch()를 사용하면 된다. 위 함수들은 체인 형태로 여러 개를 이어 연속적으로 사용할 수도 있다. 

 

promise
  .then(() => {
    console.log("성공, then!");
  })
  .catch(() => {
    console.log("실패, catch!");
  });

 

promise 객체가 resolve()를 호출하면 then, reject()를 호출하면 catch가 실행된다.

 

 

async/await

자바스크립트에서 비동기 작업을 처리하기 위한 방법인 콜백 함수를 이용하는 방법, Promise를 이용하는 방법에서 그 단점들을 보완한 것이 aync/await이다.

 

위에서 작성했던 Promise를 async로 변경해보면 아래와 같다.

async는 promise를 반환하기 때문에 비동기 후 작업은 promise를 이용하면 된다.

 

// Promise
const promise = new Promise((resolve, reject) => {
	// 처리할 비동기 작업
});

// async
async function asyncFunction() {
	// 처리할 비동기 작업
}
const promise = asyncFunction();
...

 

여기서 await를 사용하는 것이 Promise 객체의 then(), catch()로 사후 작업을 처리하는 것보다 더 간단한 방법이다.

함수 앞에 async 예약어를, 비동기 처리 코드 앞에 await를 붙이면 된다. await는 async 안에서만 동작한다.

 

function fetchHello() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var greet = 'hello';
      resolve(greet);
    }, 3000);
  });
}

async function printHello() {
  var result = await fetchHello();
  console.log(result); 
}

printHello();
console.log('bye');

// bye 출력 후 3초 뒤 hello

 

await는 fetchHello 가 끝날 때까지 기다렸다가 그 아래의 코드를 실행할 것이고 printHello 함수는 async 이므로 비동기적으로 처리된다. Promise에서 오류 발생 시 reject, catch()로 처리하는데 async/await에서는 await 결과를 가져오는 쪽에서 try~catch 문을 사용하면 된다.

 

fetch

비동기 처리는 주로 서버로부터 데이터를 가져오는 것과 같이 시간이 많이 소요되는 작업에 사용된다.

 

서버에 데이터를 요청할 때 XMLHttpRequest 객체를 사용하여 전체 페이지의 리로드 없이도 URL 로부터 데이터를 받아올 수 있다. ajax도 XMLHttpRequest 객체를 사용하는 예시이다. 자바스크립트로 XMLHttpRequest()와 Promise객체를 사용하여 비동기 통신을 구현하는 코드는 너무 복잡하다. 그래서 ES6부터 XMLHttpRequest() 대신 fetch API를 사용할 수 있다.

 

fetch는 Promise를 반환하며 아래와 같이 사용할 수 있다.

// XMLHttpRequest() 사용
const request = new XMLHttpRequest();
request.open('GET', URL);

// fetch API 사용
const request = fetch(URL);