ES6에서 비동기 처리를 위한 패턴으로 도입됨. 콜백 패턴이 가진 단점(콜백 헬, 에러 처리)을 보완하며, 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음.
후속처리 메서드로는 then, catch, finally가 있음
프로미스의 후속처리 메서드의 콜백함수는 마이크로태스크큐에 저장됨!
프로미스의 상태
pending : 비동기처리가 아직 수행되지 않은 상태
fulfilled: 비동기 처리 수행(settled상태, 성공), resolve함수 호출
rejected: 비동기 처리 수행(settled상태, 실패), reject함수 호출
1. then메서드
언제나 프로미스를 반환함
첫번째 콜백함수는 비동기 처리가 성공했을 때, 두번째는 실패했을 때 호출되는 콜백함수다
2. catch메서드
언제나 프로미스를 반환함
프로미스가 rejected상태인 경우만 호출됨
한개의 콜백함수를 인수로 전달받음
3. finally메서드
언제나 프로미스를 반환함
한개의 콜백함수를 인수로 전달받음
프로미스의 성공, 실패와 상관없이 무조건 한번 호출됨
2. Promise.all()이란?
여러 개의 비동기처리를 모두 병렬처리할 때 사용함.
ex) api요청할 게 3개가 있다면 3개 한꺼번에 실행하고, 응답은 배열로 받게 됨.
입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부함
Promise.race(): 여러 비동기 처리를 다룰 때 가장 먼저 fulfilled된 처리 결과를 반환
3. Promise와 Callback 비교
콜백 패턴의 단점으로는 첫번째로 콜백 헬, 두번째로 에러처리가 어렵다는 점이 있다.
1. 콜백 헬
콜백함수를 통해 비동기 처리 결과에 대한 후속처리를 하기 위해 또 비동기함수를 호출하고 해야하지만, 프로미스의 경우, 프로미스의 후속처리를 하기 위해 then, catch, finally를 사용한다.
2. 에러처리
콜백함수의 경우, 에러처리가 곤란하다는 문제가 있다. 하지만 프로미스의 경우 then, catch, finally를 통해 에러처리를 할 수 있다.
ex) try문의 setTimeout함수의 콜백함수에서 발생시킨 에러는 setTimeout의 타이머가 실행되기 이전에 콜스택에서 제거된 상태이기 때문에 catch문에서 에러를 캐치하지 못한다. 에러는 콜스택의 아래방향, 실행컨텍스트 방향으로 전파되기 때문.
2. Async, Await
1. Async, Await의 정의
ES8에서 비동기처리를 동기 처리처럼 동작하도록 구현할 수 있게 도입된 개념
프로미스 기반으로 동작하며, 후속처리 메서드 사용 없이 동기처럼 프로미스를 사용할 수 있음.
1. Async함수
async함수는 언제나 프로미스를 반환한다.
2. Await키워드
프로미스가 settled상태가 될 때까지 대기하다가 settled상태가 되면 프로미스가 resolve한 처리 결과를 반환함.
2. Async, Await의 사용방법
async는 비동기 처리해야할 함수 앞에 붙여주고, await는 반드시 async함수 내부의 프로미스 앞에 사용해야 함.
에러 처리시에는 try-catch를 사용할 수 있음.
3. Promise와 Async, Await의 차이
Async, Await는 Promise의 꼬리에 꼬리를 무는 코드를 해소하고자 만들어짐
에러 핸들링
Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다
코드 가독성
Promise의 .then() 지옥의 가능성
코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
async/await은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해하기 쉽다.
3. AJAX
1. AJAX란?
Ajax(Asynchronous JavaScript and XML)는 웹 구현시 웹 페이지 전체를 다시 로딩하지 않고, 서버와 비동기적으로 통신할 수 있는 개발기법
브라우저에서 제공하는 Web API인 XMLHttpRequest객체를 기반으로 동작함
JSON형식을 사용함
2. 전통방식과 비교
전통방식 : 화면이 전환되면 서버로부터 새로운 HTML페이지를 전송받아 웹페이지 전체를 처음부터 다시 렌더링 함
단점 :