[CH45]프로미스

[yuzunsang]

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>

[yuzunsang]

Q. 아래 코드의 실행 결과는? 그렇게 실행된 이유까지 설명하세요.

console.log(1);

setTimeout(() => {
  console.log(2);
}, 0);

Promise.resolve() 
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(4);
  });

console.log(5);

정답

1 5 3 4 2

이유

전역 실행 컨텍스트가 콜 스택에 먼저 쌓이고, 1 을 출력함.
() => console.log(2)와 같은 비동기 콜백 함수는 태스크 큐로 이동.
() => console.log(3)과 () => console.log(4)와 같은 프로미스 후속 처리 메서드의 결과는 마이크로 태스크 큐로 이동.
5를 출력한 후 전역 실행 컨텍스트가 제거된 후 콜 스택은 비게 된다.
이 때, 마이크로태스크 큐가 태스크 큐보다 우선순위가 높으므로, 3 4 가 먼저 출력되고, 그 다음 2가 출력된다.

[J-yun-ji]

Q. 아래 코드는 몇 초가 걸릴까요?

const request1 = () =>
    new Promise(resolve => setTimeout(() => resolve(1), 3000));
const request2 = () =>
    new Promise(resolve => setTimeout(() => resolve(2), 2000));
const request3 = () =>
    new Promise(resolve => setTimeout(() => resolve(3), 1000));
const request4 = () =>
    new Promise(resolve => setTimeout(() => resolve(4), 7000));

Promise.all([request1(), request2(), request3(), request4()])
    .thsn(console.log) 
    .catch(console.error); 

정답

약 7초

[bo-eun]

Q. 비동기 처리 결과와 상관 없이 마지막에 무조건 console.log('1')이 실행되도록 아래 코드를 수정하세요.

const promise = url => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.send();
  if(xhr.status === 200) {
    resolve('result');
  } else {
    reject('failure reason');
  }
});

promise('https://....')
  .then(res => console.log(res))
  .catch(err => console.error(err))

정답

promise('https://....')
.then(res => console.log(res))
.catch(err => console.error(err))
.finally(() => console.log('1'))