promise

promise란

비동기를 간편하게 처리할 수 있도록 도와주는 js에 있는 Object

정상적으로 기능이 수행 되어졌다면, 처리된 결과값을 전달한다

문제가 발생했다면 에러를 전달한다

 

 

promise에 중요한 2가지

1. state

2. producer, consumers

 

state는 3가지로 나뉜다.

1. pending: promise가 만들어져서 지정한 동작이 수행중일때 상태

2. fulfilled: 동작이 성공적으로 끝난 상태

3. rejected: file을 찾을 수 없거나 network에 문제가 생긴 상태

---

예제를 통해 보는게 더욱 편리할 수 있음 아래는 예제

 

1. promise 생성하기

// 1. producer (promise 생성하기)
// promise는 생성한 순간, executor 가 자동적으로 실행됨
// resolve는 promise가 성공했을 시 값을 가져오고, reject는 실패했을 시 이유를 가져온다.
const promise = new Promise((resolve, reject) => {
    // promise는 따로 선언하지 않아도, 바로 실행 됨
    // 
    console.log('doing something...');
    setTimeout(() => {
        // resolve('ellie')
        reject(new Error('no network'))
    },2000)
})

2. promise 사용하기

//2. consumers (promise 사용하기) : then, catch, finally 등을 이용하여 값을 가져올 수 있음

// then은 promise에서 성공한 resolve에 들어가는 인자를 가져올 때 사용된다.
// catch는 promise에서 실패시 일어나는 이유를 다루는 reject에 들어가는 인자를 가져옴
// finally는 성공하던 실패하던 마지막에 호출되어지는 아이

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

3. promise 연결하기

  //3. promise chaining (promise 연결하기)
  // then은 resolve의 인자 뿐만 아니라, 그것을 다루는 또 다른 promise를 선언하고 사용 가능하다.
  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))

4. 오류 처리하기

//4. error handling (오류 처리 방법)

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(hen => getEgg(hen))
  // 만약 에러를 보이지 않고, 전체 로직을 돌게 하고 싶다면, 이렇게도 해결 가능
  .catch(error => {
    return '빵';
  })
  .then(egg => cook(egg))
  .then(meal => console.log(meal))
  .catch(error => console.log(error))

출처: https://www.youtube.com/watch?v=JB_yU6Oe2eE