비동기란?
- 요청중 blocking이 없는것
- 요청에 대한 결과과 동시에 일어나지 않는다.
- 일반적으로, 프로그램의 코드는 순차적으로 진행됨
한번에 한가지 사건만 발생 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면,
그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다.
그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면,
전체 프로그램이 모두 멈춘 것처럼 보인다.
비동기의 주요 사례
DOM Element의 이벤트 핸들러
마우스, 키보드 입력 (click, keydown 등)
페이지 로딩 (DOMContentLoaded 등)
타이머
타이머 API(setTimeout 등)
에니메이션 API (requestAnimationFrame)
서버에 자원 요청 및 응답
fetch API -> 서버에 요청하기 섹션
AJAX (XHR)
타이머 관련 API
setTimeout(callback, millisecond)
일정 시간 후에 함수를 실행
arguments: 실행할 callback 함수, callback 함수 실행 전 기다려야 할 시간 (밀리초)
return value: 임의의 타이머 ID
setTimeout(function () {
console.log('1초 후 실행');
}, 1000);
// 123
setInterval(callback, millisecond)
일정 시간의 간격을 가지고 함수를 반복적으로 실행
arguments: 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
return value: 임의의 타이머 ID
setInterval(function () {
console.log('1초마다 실행');
}, 1000);
// 345
// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);
// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);
clearInterval(timerId)
반복 실행중인 타이머를 종료
arguments: 타이머 ID
return value: 없음
const timer = setInterval(function () {
console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// 더 이상 반복 실행되지 않음
setTimeout에 대응하는 clearTimeout도 있음
자바스크립트를 통해 비동기코드를 처리하는 기본방법
-콜백함수
-Promise.all
-Async-await
Promise
new Promise()
resolve() -> Go to Next Action
reject() -> Handle Error (오류발생)
Promise.all(iterable) :
모든 프라미스가 이행될 때까지 기다렸다가 그 결과값을 담은 배열을 반환하는 메서드
특징
입력된 프로미스 배열중 하나라도 반환되면 나머지 배열도 리젝트된다
비동기적으로 병렬로 실행됨
순서대로 실행되지만 , 앞의 함수가 완료되는 것을 기다리지 않는다.
(반면 await를 실행시켰을 경우 첫번째 함수가 걸리는 시간을 다 채우고 에러를 반환한다)
