6.29 Dev.Feedback (Promise)

참조 : https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke

• Promise는 콜백의 단점을 해결하려는 시도 속에서 만들어졌다.
• Promise 자체가 콜백을 대체할 수 있는 것은 아니다.
• Promise에서도 콜백을 사용하는 것을 보면 확실히 알 수 있다.
• Promise를 사용하면, 콜백 함수의 결과를 비교적 예측하기 쉽게 만들어준다.
• Promise 기반 비동기적 함수를 호출하면, 그 함수는 Promise 인스턴스를 반환한다.
• Promise는 성공(fulfilled)하거나 실패(rejected)하거나 단 두가지의 경우밖에 가지지 않는다. (Resolve -> 성공, Reject -> 실패)
• Promise가 성공하거나 실패하면, 그 Promise를 결정(Settled)됐다고 한다.
• Promise는 객체(내장 객체)이므로 어디든 전달할 수 있다는 점도 콜백에 비해 간편한 장점이다.
• Resolve나 Reject는 함수이지만, 첫 번째로 호출한 것만 의미가 있다. 즉, 여러번 호출하든 섞어서 호출하든 결과는 첫 번째 호출한 것으로 동일하게 나온다.
• Promise의 세가지 상태 Pending, Fulfilled, Rejected 이중 Pending 상태는 Fulfilled나 Rejected로 전환될 수 있다. 전환되는 시점은 함수가 실행됐을 때이다.

// Promise.all을 최대한 빨리 완료시키기 위해
// 이미 이행된 프로미스로 배열을 만들어 인자로 전달
var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];

var p = Promise.all(resolvedPromisesArray);
// 실행 즉시 p의 값을 기록
console.log(p);

// 호출 스택을 비운 다음 실행하기 위해 setTimeout을 사용
setTimeout(function() {
    console.log('the stack is now empty');
    console.log(p);
});

// 로그 출력 결과 (순서대로):
// Promise { <state>: "pending" } 
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] } ==> 함수가 실행됐기에 state가 변경된 것을 볼 수 있다.

Promise All

Promise.all은 배열 내 모든 값의 이행(또는 첫 번째 거부)을 기다린다. 즉 return을 해야 결과 값을 얻어낼 수 있다.

매개변수로 Promise가 아닌 다른 값이 들어오면, 무시하지만 이행시 배열에 값을 넣어준다.

let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("foo");
  }, 100);
});

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [3, 1337, "foo"]
});