🦎 [딥다이브 스터디] 45장. Promise

1. 프로미스가 무엇인지 '상태'라는 키워드를 포함해서 설명해보세요.

생성된 직후의 프로미스는 기본적으로 pending 상태이다. 이후 비동기 처리가 수행되면 비동기 처리 결과에 따라 다음과 같이 프로미스의 상태가 변경된다.

성공→ resolve 함수를 호출해 프로미스를 fullfileld 상태로 변경
실패→ reject 함수를 호출해 rejected 상태로 변경

• 프로미스는 콜백 패턴 보완하기 위해 만들어진 문법.. 생성자 함수다. 객체다.

2. 프로미스 객체가 갖는 후속 처리 메서드에 대해서 설명해보세요.

후속메서드 then(fullfilled) . catch( rejected) , finally(한 번만..) 등. 비동기 처리 상태가 변하면 후속 처리 메서드에 인수로 전달한 콜백함수가 선택적으로 호출 됨. 이때 콜백함수에 프로미스의 결과가 인수로 전달된다. 모든 후속 처리 메서드는 프로미스를 반환하며 비동기로 동작한다. promise 를 반환하기때문에 chaining 이 가능하다.

3.HTTP 요청의 종류와 정의를 설명해보세요.

get, post, delete ..

patch ⇒ 객체형태가 있을때 그 일부분만 수정할때.
put ⇒ 객체를 완전히 대체할때 ..

4. 다음 예제에서 todos가 undefined로 반환 되는 이유는?

xhr의 이벤트핸들러, onload 메서드가 비동기로 동작하기 때문이다. 비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드문이 완료되지 않았더라도 기다리지 않고 즉시 종료된다. (즉, 콜스택이 즉시비워지고, 태스크 큐에 저장된다.) console.log 는 콜스택에 추가되고, 콜 스택에 있는 컨텍스트들이 전부 실행이 완료가되고 비어야지만(콜스택은 1번에 1개씩만 처리 가능..) 이벤트 루프에 의해서 콜 스택으로 푸시되어 실행되므로 get함수로 데이터를 업데이트하기 전에 console.log(todos)가 실행되어 undefined가 출력되게 된다. console.log가 찍히는 시점보다 먼저 서버에서 값을 전송받아도, 마찬가지로 동작한다.

get함수 호출 → 이벤트 핸들러 태스크 큐 이동 → 함수 종료 → 이후 코드문 처리 → 태스크 큐에 이벤트가 콜 스택으로 이동 → 이벤트 코드 실행 (?)

5.다음 비동기 콜백 패턴에서 에러를 핸들링 하기 어려운 이유는?

에러는 호출자 방향으로 전파되는데 setTimeout은 비동기 함수로 해당 함수가 호출됨과 즉시에 종료되면서 콜 스택에서 제거된다. 콜백 함수는 태스크큐에 저장되었다가 콜 스택이 비면 이벤트 루프에 의해서 실행되는데 이 때 콜백 함수의 실행 컨택스트인 하위 컨택스트에 아무것도 없기 때문에 호출자가 없는걸로 인식되어 catch 블록에서 정상적으로 에러가 잡히지 않기 때문이다.

6. promise.all 을 사용해서 코드를 수정하시오

//resolve라는 이름을 다른걸로 바꾸면 error 발생
const req1 = () =>
new Promise(resolve => setTimeout(()=>resolve(1),1000));
const req2 = () =>
new Promise(resolve => setTimeout(()=>resolve(2),2000));
const req3 = () =>
new Promise(resolve => setTimeout(()=>resolve(3),3000));

//const 선언시 변수 값 재할당 불가
let resonse = [];
req1()
  .then(data => {
    resonse.push(data);
    return req2();
  })
  .then(data => {
    resonse.push(data);
    return req3();
  })
  .then(data => {
    resonse.push(data);
    console.log(res);
  })
  .catch(console.error);

let resonse = [];

Promise.all([req1(), req2(), req3()])
  .then(result => resonse = result)
  .catch(console.error);