javascript-14: 상속/property

Promise

• Promise is a JavaScript object for asynchronous operation.
• State: pormise가 만들어져서 지정한 작업이 수행중일때 pending → 완료되면 fullfilled / 에러가 날 경우:rejected
• Producer(데이터만들어내는) vs Consumer(데이터를 소비하는)

1. Producer

• when new Promise is created, the executor runs automatically. (새로운 promise가 만들어지면 excutor는 바로 실행이됨)

const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    resolve('ellie');
    // reject(new Error('no network'));
  }, 2000);
});

* promise안에 네트워크통신하는 코드를 만들었다면 promise가 만들어지는 순간 네트워크 통신 수행

2. Consumers: then, catch, finally

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

1.promise chainning

1-1 예제1

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

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

1-2 예제2

const f1 = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("1번 주문 완료");
    }, 1000);
  })
};
const f2 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("2번 주문 완료");
    }, 1000);
  })
};

const f3 = (message) => {
  console.log(message);
  return new Promise((res, rej) => {
    setTimeout(() => {
      res("3번 주문 완료");
    }, 1000);
  })
};
console.log('시작');
f1()
.then(res => f2(res))
.then(res => f3(res))
.then(res => console.log(res));

2.promise all(프로미스를 병렬로 사용/ 배열 값)

console.time("x")
Promise.all([f1(), f2(), f3()]).then((res) => {
  console.log(res);
  console.timeEnd("x");
});

* console.time(“x”) ~ console.timeEnd(“x”) = 시간 재기

3. promise race (제일 빨리 끝나는 값만 도출함)

console.time("x")
Promise.race([f1(), f2(), f3()]).then((res) => {
  console.log(res);
  console.timeEnd("x");
});

4. Error Handling

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve((`${hen} => 🥚`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });

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

↓↓↓↓↓↓↓↓↓↓↓↓reject↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

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

getHen() //
  .then(getEgg)
  // .catch(error =>{
  //   return '🍞';
  // })
  .then(cook)
  .then(console.log)
  .catch(console.log);