[js 딥다이브] 45장 프로미스

프로미스

비동기 처리를 위한 콜백 패턴의 단점

비동기 함수는 처리 결과를 외부에 반환할 수 없어, 콜백을 사용해야 하는데 콜백이 수없이 중첩되는 경우가 생김. 이를 콜백 지옥이라 함.

에러 처리 부분에서 try catch 문 내의 비동기 함수의 에러를 캐치하지 못하는 문제가 있음.

-> 단일 콜백일 경우 비동기 함수 내부에서 에러 처리 하면 됨. 그러나 여러개의 콜백함수를 묶어 에러처리를 할 수 없음.

프로미스의 생성

// GET 요청을 위한 비동기 함수

const promiseGet = url => {

return new Promise((resolve, reject) => {

const xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.send();

xhr.onload = () => {

if (xhr.status === 200) {

// 성공적으로 응답을 전달받으면 resolve 함수를 호출한다.

resolve(JSON.parse(xhr.response));

} else {

// 에러 처리를 위해 reject 함수를 호출한다.

reject(new Error(xhr.status));

}

};

});

};

// promiseGet 함수는 프로미스를 반환한다.

promiseGet('https://jsonplaceholder.typicode.com/posts/1');

|프로미스의 상태 정보|의미|상태 변경 조건|

|—|—|—|

|pending|비동기 처리가 아직 수행되지 않은 상태|프로미스가 생성된 직후 기본 상태|

|fulfilled|비동기 처리가 수행된 상태(성공)|resolve 함수 호출|

|rejected|비동기 처리가 수행된 상태(실패)|reject 함수 호출|

1. 프로미스의 상태는 resolve 또는 reject 함수를 호출하는 것으로 결정

2. fulfilled 또는 rejected 상태를 settled 상태라고 한다. settled 상태는 fulfilled 또는 rejected 상태와 상관없이 pending이 아닌 상태로 비동기 처리가 수행된 상태

프로미스의 후속 처리 메서드

then

1. 첫 번째 콜백 함수는 프로미스가 fulfilled 상태(resolve 함수가 호출된 상태)가 되면 호출된다. 이때 콜백 함수는 프로미스의 비동기 처리 결과를 인수로 전달받는다.

2. 두 번째 콜백 함수는 프로미스가 rejected 상태(reject 함수가 호출된 상태)가 되면 호출된다. 이때 콜백 함수는 프로미스의 에

러를 인수로 전달받는다.

즉 첫번째는 비동기 처리 성공, 두번째는 실패처리 콜백

catch

프로미스가 rejected 일때만 호출됨.

finally

프로미스의 성공 여부와 관계없이 무조건 호출됨

new Promise(() => {})

.then()\

.catch()

.finally();

프로미스의 에러 처리

then 두번쓰면 첫번째 then의 에러처리를 못 잡음. 따라서 catch를 쓰는 편이 좋다.

프로미스 체이닝

바로 앞의 메서드가 반환한 반환값을 가지고 순서대로 처리됨.

프로미스의 정적 메서드

resolve, reject

이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용

all

여러개의 비동기 처리를 병렬 처리할때 사용.

모든 비동기 처리가 fulfilled 상태가 되면 반환.

순차적으로 실행되나 반환이 순차적이지 않을 수 있으므로 주의 필요

반환값은 또 순차적으로 반환됨. 반환되지 않는 경우에만 주의 필요함.

race

all과 비슷하나 모든 비동치 처리가 완료될때까지 기다리지 않음. 가장 먼저 처리된(fulfilled) 비동기 처리를 반환.

allSettled

fulfilled, reject 여부에 관계없이 모든 처리 결과를 반환

마이크로 태스크 큐

프로미스의 후속 처리 메서드 함수는 마이크로 태스크큐에 저장됨.

마이크로태스크 큐는 태스크 큐보다 우선순위가 높음.

fetch

http 요청 전송 기능을 제공하는 Web API.

책에서는 클라이언트 사이드라고 되어 있는데 헷갈리면 안되는게 nodejs에도 내장되어 있음.

const wrongUrl = 'https://jsonplaceholder.typicode.com/XXX/1';

// 부적절한 URL이 지정되었기 때문에 404 Not Found 에러가 발생한다.

fetch(wrongUrl)

// response는 HTTP 응답을 나타내는 Response 객체다.

.then(response => {

if (!response.ok) throw new Error(response.statusText);

return response.json();

})

.then(todo => console.log(todo))

.catch(err => console.error(err));

결론 axios가 더 편함.