ES6 - promise

Promise

Javascript에서 제공하는 asynchronous를 간편하게 처리할 수 있도록 도와주는 Object이다.

콜백함수 대신에 비동기처리를 할 수 있다.

정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행되었다면 성공 메세지와 결과값을 전달하고, 기능이 수행되지 않았을 경우 error를 출력한다.

State

pending -> fulfilled or rejected

operation이 수행 중일 때 pending
operation을 성공적으로 끝냈을 때 fulfilled
operation이 실패하였을 때 rejected

Producer

새로운 Promise가 만들어질 때, 전달한 executor가 바로 실행된다.

const promise = new Promise((resolve, reject) => {
  // 무거운 작업 (network, read files)
  console.log('doing something...');  
  setTimeout(() => {
    resolve('elle');
    reject(new Error('no network'));
  }, 2000);
});

Consumer

then

함수 실행이 성공하면 reslove 안에 있는 value를 argument로 전달받는다.

catch

함수 실행이 실패하면 reject안에 있는 error를 전달받는다.

finally

함수 실행 여부에 상관없이 무조건 실행된다.

promise
  .then(value => {
    console.log(value);  // ellie
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log('finally');
  });

Promise Chaining

const fetchNumber = new Promise(reslove, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
.then(num => num * 2)  // 2
.then(num => num * 3)  // 6
.then(num => {  // 6
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num - 1), 1000);  // 5
  });
})
.then(num => console.log(num));  // 5

오류를 잘 처리 하자

const getHen = () =>
  new Promise((reslove, reject) => {
    setTimeout(() => resolve('chicken'), 1000);
  });
const getEgg = hen =>
  new Promise((reslove, reject) => {
    setTimeout(() => reject(new Error(`error! ${hen} => egg`)), 1000);
  });
const cook = egg =>
  new Promise((reslove, reject) => {
    setTimeout(() => resolve(`${egg} => fry`), 1000);
  });

// getHen() //
// .then(hen => getEgg(hen))
// .then(egg => cook(egg))
// .then(meal => console.log(meal));
// .catch(error => console.log(error));

// chicken => egg => fry

// 한가지 argument를 함수에 전달하는 경우 생략가능
getHen()
  .then(getEgg)
  .catch(error => 'bread')
  .then(cook)
  .then(console.log)
  .catch(console.log);
// bread => fry
// .catch(error => 'bread')가 없을 시 Error: error! chicken => egg