자바스크립트 비동기처리
- callback 함수
- promise
- 비동기 함수(async/await)
- 제너레이터(Generators)와 yield
동기적 제어흐름
현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미합니다. 분기문, 반복문, 함수 호출 등이 동기적으로 실행되며 이 경우 코드의 흐름과 실제 제어 흐름이 동일합니다. 다만, 싱글 스레드 환경에서 메인 스레드 를 긴 시간 점유(무한루프)하면, 프로그램을 멈추게 합니다.
자바스크립트의 비동기
JS 엔진은 비동기 처리를 제공하지 않기 때문에 정해진 함수를 제공하여 비동기 처리를 가능하게 해주는데, 이 함수들을 API라고 합니다. (node.js의 경우 파일처리 API, 암호화 API 등을 제공)
JS의 비동기 API
1)setTimeout
2)XMLHttpRequest
3)Web API
//타이머 비동기처리
setTimeout(()=> console.log('타이머 끝'), 1000)
setInterval(()=> console.log('인터벌 타이머'), 1000)
//네트워크처리
fetch('https://google.com')
.then(() => console.log('네트워크 요청성공')) //then: 요청하는게 성공
.catch(() => console.log('네트워크 요청실패')) //catch: 에러시 해당콘솔 띄우며 잡음 비동기적 제어흐름
현재 실행 중인 코드가 종료되기 전에 다음 줄의 코드를 실행하는 것을 의미합니다. 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행되므로 코드 흐름과 실제 코드가 제어되는 흐름이 다른데요. 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업를 처리해 효율적으로 일 진행이 가능합니다.
let a =10;
setTimeout(function callback(){
console.log('a :', a)
},1000)
console.log('Finished')
/*
실행순서
1. a 선언
2. 'finished'
3. 2번 실행 3초 후 'a : 10'
*/비동기 처리 모델
비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있으며 이벤트루프, 태스크 큐, 잡 큐 등으로 구성되어 있습니다. API모듈은 비동기 요청을 처리한 후 태스크 큐에 콜백 함수를 넣고, 자바스크립트 엔진은 콜 스택이 비워지면, 태스크 큐의 콜백 함수를 실행합니다.
- 콜백 함수(Callback Functions): 다른 함수의 실행 결과로 호출되는 함수로, 주로 비동기적인 처리에서 사용
- Promise: 비동기 작업의 성공 또는 실패와 같은 상태를 캡슐화한 객체
- 비동기 함수(Async Functions): async/await 키워드를 사용하여 비동기적인 작업을 수행
- 제너레이터(Generators)와 yield: 함수의 실행을 일시 중지하고 값을 반환한 뒤, 이전 상태에서 다시 실행할 수 있게 함
Promise vs Async/await
//catch 메소드
function fetchData1() {
return request()
.then((response) => response.requestData)
.catch(error => {})
}
//try-catch 구문
async function asyncFunc() {
try {
let data1 = await fetchData1()
return fetchData2(data1)
} catch (e) {
console.log("실패 : ",e)
}
}위의 예시처럼 try-catch 구문으로 async/await 형태 비동기 코드 에러처리가 가능하며 catch 절의 e는 Promise의 catch 메서드가 받는 반환 값과 동일합니다.
일반적으로 Async/awiat을 더 많이 쓰는 추세이긴 하나 메소드 체이닝이 많이 사용되는 코드에서는 Promise가 코드에 일관성을 지켜서 더 깔끔하게 보일 수 있고, 개별 함수를 호출하여 값을 받아오는 경우에는 asyne/await가 효과적일 수 있습니다. 이렇듯 Promise와 async/await 는 효과적으로 사용될 수 있는 상황이 다르기 때문에 두 방법 모두 잘 알고 있어야 하겠습니다.
