Promise.property.then

• then은 콜백함수인자를 0~2개 받는다.
• then의 콜백함수는 비동기적으로 실행된다.

const resolvedProm = Promise.resolve(33);

let thenProm = resolvedProm.then(value => {
    console.log("이 부분은 호출 스택 이후에 실행됩니다. 전달받은 값이자 반환값은 " + value + "입니다.");
    return value;
});
// thenProm의 값을 즉시 기록
console.log(thenProm);

// setTimeout으로 함수 실행을 호출 스택이 빌 때까지 미룰 수 있음
setTimeout(() => {
    console.log(thenProm);
});


// 로그 출력 결과 (순서대로):
// Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
// "이 부분은 호출 스택 이후에 실행됩니다. 전달받은 값이자 반환값은 33입니다."
// Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: 33}

then의 반환값은 promise이다.

• promise의 목적은 비동기 블럭이 실행되고나서 resolve또는 reject를 실행하고 해당 함수의 매개변수로 값을 전달하는데 의미가 있다.
• then이 return이 될때 promise를 리턴을 한다. -> then의 콜백함수는 비동기적으로 실행이 되므로 첫번째 조건을 만족한다. promise를 리턴하는것은 약속이다.
• then 핸들러에서 값을 그대로 반환한 경우에는 Promise.resolve(<핸들러에서 반환한 값>)을 반환하는 것과 같다. ->promise를 반환하는거고 resolve가 실행되지 않은 상태를 말한다.
• 값만 반환하려면 resolve(값)을 실행시켜주면 된다. 이게 곧 promise객체에서 resolve를 실행한것과 같기 때문

Promise.resolve('foo')
  // 1. "foo"를 받고 "bar"를 추가한 다음 그 값으로 이행하여 다음 then에 넘겨줌
  .then(function(string) {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += 'bar';
        resolve(string);
      }, 1);
    });
  })
  // 2. "foobar"를 받고 그대로 다음 then에 넘겨준 뒤,
  // 나중에 콜백 함수에서 가공하고 콘솔에 출력
  .then(function(string) {
    setTimeout(function() {
      string += 'baz';
      console.log(string);
    }, 1)
    return string;
  })
  // 3. 이 부분의 코드는 이전의 then 블록 안의 (가짜) 비동기 코드에서
  // 실제로 문자열을 가공하기 전에 실행됨
  .then(function(string) {
    console.log("마지막 Then: 출력 순서가 이상함");

    // 'baz' 부분은 setTimeout 함수로 비동기적으로 실행되기 때문에
    // 이곳의 string에는 아직 'baz' 부분이 없음
    console.log(string);
  });

// 로그 출력 결과 
// 마지막 Then: 출력 순서가 이상함
// foobar
// foobarbaz

Promise.resolve('foo')
  .then(function(string) {
      console.log("hi1")
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
        string += 'bar';
        resolve(string);
      }, 1);
    });
  })
 
  .then(function(string) {
     console.log("hi2")
    return new Promise(function(resolve, reject){
     	//또다른 비동기흐름을 생성
      setTimeout(function() {
        string += 'baz';
        console.log(string);
        resolve(string)
      }, 1)
    })
  })
 
  .then(function(string) {
    console.log("마지막 Then: 순서는 차례대로 나온다.");
       console.log(string);
  });
     console.log("hi3")


// 로그 출력 결과 :
//hi3
//hi1
//Promise {<pending>}
//hi2
//foobarbaz
//마지막 Then: 순서는 차례대로 나온다.
//foobarbaz

• 두번째 코드에서는 두번째 then에서 해당함수를 실행시 바로 Promise를 리턴하므로 세번째 then에서 Promise가 실행되고 resolve를 반환할때 까지 기다린다.
• 값을 바로 resolve로주는지, Promise에 인자로 받은 함수를 실행후 resolve로 주는지 차이.

Promise

사용이유

• 비동기 연산이 종료된 이후에 결과 값 또는 실패 사유를 다음 비동기 함수에 전달하기 위한 연결매개체이다. 따라서 비동기 코드들을 순서대로 처리할 수 있다.
  (이전에 비동기작업들이 이후에 나올 비동기 코드에 영향있어서 실행을 끝마치고 다음 비동기 코드를 실행해야 할경우에 둘 사이를 잇는 매개체.)

let myFirstPromise = new Promise((resolve, reject) => {
  // 이 예제에서는 setTimeout()을 사용해 비동기 코드를 흉내냅니다.
  // 실제로는 여기서 XHR이나 HTML5 API를 사용할 것입니다.
  setTimeout( function() {
    resolve("성공!")  // 와! 문제 없음!
  }, 250)
})

myFirstPromise.then((successMessage) => {
  console.log("와! " + successMessage)
});

console.log(myFirstPromise)

결과 : 
Promise {<pending>}
와! 성공!

let myFirstPromise = new Promise((resolve, reject) => {
 
    resolve("성공!")  // 와! 문제 없음!
})

myFirstPromise.then((successMessage) => {
  console.log("와! " + successMessage)
});
console.log(myFirstPromise);

// 결과 :
Promise {<fulfilled>: '성공!'}
와! 성공!

• then자체는 비동기적으로 실행되니 fulfilled로 뜬다.

promise리턴시 Then을 만났을 때 해당 콜백함수가 실행이 되고. then의 콜백함수는 promise의 콜백함수에서 resolve가 실행이 되고 실행된다. then의 콜백함수는 비동기로 실행되지만 then다음의 then은
Promise를 리턴받을때 까지 기다린다. 따라서 앞의 then의 콜백함수의 return을 받고 뒤의 then의 콜백함수가 실행된다.
Pomise에 then을 만나면 기존스레드는 진행하고 새로운 쓰레드를만들고 그뒤 then은 Promise를 줄때까지 대기.
Promise를 return하든 값을 return하든 똑같음.