1. 비동기 처리를 위한 콜백 패턴의 단점
- 콜백 헬
- 에러 처리의 한계
2. 프로미스의 생성
ES6에 도입된 Promise는 ECMAScript 사양에 정의된 표준 빌트인 객체다.
Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스를 생성한다.
비동기 처리가 성공하면 reseolv 함수를 호출해 프로미스를 fulfilled 상태로 변경하고,
비동기 처리가 실패하면 reject 함수를 호출해 프로미스를 rejected 상태로 변경한다.
3. 프로미스의 후속 처리 메서드
Promise.prototype.then
두 개의 콜백 함수를 인수로 받는다.
첫 번쨰 함수는 성공 처리 콜백 함수이며, 두 번째 콜백 함수는 실패 처리 콜백 함수.
Promise.prototype.catch
프로미스가 rejected인 경우에만 호출
Promise.prototype.finally
프로미스의 fulfilled, rejected 여부와 달리 무조건 한 번 호출 됨.
4. 프로미스의 에러 처리
then 메서드의 두 번째 콜백 함수로 에러를 처리 할 수 있으나,
catch로 처리 하는 것이 권장 된다.
5. 프로미스 체이닝
6. 프로미스의 정적 메서드
Promise.resolve
Promise.reject
Promise.all
여러 개의 비동기 처리를 모두 병렬처리할 때 사용.
모든 프로미스가 fulfilled 상태가 되는 것을 기다려서 결과를 배열에 저장해 새로운 프로미스로 반환.
Promise.race
Promise.all과 달리 가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve하는 새로운 프로미스를 반환.
Promise.allSettled
ES11(EcmaScript 2020)에 도입.
프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달 받아, 전달받은 프로미스가 모두 settled 상태가 되면 처리 결과를 배열로 반환.
[{status: "fulfilled", value: 1},
{status: "rejected", reason: Error: Error! at <anonymous>:3:60}
]7. 마이크로태스크 큐
우선순위: 마이크로 태스크 큐 > 태스크 큐
8. Fetch / Axios
fetch
XMLHttpRequest 객체보다 사용법이 간단하고 프로미스를 지원하기 때문에 비동기 처리를 위한 콜백 패턴의 단점에서 자유롭다. 비교적 최근 추가 되었음.
fetch 함수가 반환하는 프로미스는 기본적으로 404 Not Found나 500 Internal Server Error와 같은 HTTP 에러가 발생해도 에러를 reject하지 않고 불리언 타입의 ok 상태를 false로 설정한 Response 객체를 resolve한다. 오프라인 등의 네트워크 장애나 CORS 에러에 의해 요청이 완료되지 못한 경우에만 프로미스를 reject 한다.
const wrongUrl = 'https://jsonplaceholder.typicode.com/XXX/1';
fetch(wrongUrl)
.then(response => {
if(!response.ok) throw new Error(response.statusText);
return response.json();
})
.then(todo => console.log(todo))
.catch(err => console.error(err));axios
Axios는 모든 HTTP 에러를 reject하는 프로미스를 반환함.
(에러 처리에 용이함)
