Promise

promise

• new Promise를 사용하여 객체를 생성하여 사용하며, 콜백함수를 인자로 받는다.
• 그리고 해당 콜백함수의 인자로 resolve와 reject 함수를 가진다.
• promise 는 resolve와 reject의 실행 여부를 비교하여 작업의 성공여부와 실패여부를 비교한다.
  → resolve → 성공, reject → 실패

pending, fulfilled, rejected

• promise 의 상태는 3가지로 나눌 수 있다.
• pending → resolve, reject 함수가 실행되기 전의 promise 상태.
  (대기상태)
• fulfilled → reslove가 실행되어 작업이 성공한 상태.
  (이행됨)
• rejected → reject가 실행되어 작업이 실패한 상태.
  (거부됨)

사용하기

• resolve가 정상적으로 실행되면 .then 을 이용하여 다음 함수를 실행 시킬 수 있다.
  → resolve의 위치에서 함수가 실행되는 것은 아니며, resolve가 호출되는 경우 해당 함수가 종료되면 .then을 실행한다.

const fn = (value) => {
  return new Promise((resolve, reject) => { // 함수에 인스턴스를 반환한다.
    console.log(value)
    resolve() // 정상적으로 함수의 데이터가 들어온 경우 resolve 메소드를 사용한다
  })
}

const runFn = () => {
  fn("A")
  .then(()=>{ // 위의 Promise에서 resolve가 실행되면 then의 내용을 실행한다.
    return fn("B") 
  })
  .then(()=>{
    return fn("C")
  })
}

// A
// B
// C

• 위처럼 return 을 이용하여 promise 객체를 가진 값을 반환시키면, 반환된 promise 에서 resolve판단을 다시 실행하고 동일하게 .then을 사용 할 수 있다.
• 이 처럼 return 을 이용하여 promise 객체들이 연결되어 실행되는 것을 promise 체이닝이라고 한다.

.then

• promise에서 실행된 값이 resolve 인 경우에 내부의 값을 실행시킨다.
• resolve 함수에 작성된 값은 .then에서 인자로 받아 사용이 가능하다.
  -> 이를 이용해서 데이터를 단계별로 바꿔나갈 수 있다.

let fn = () => {
  return new Promise((resolve, reject) => {
    console.log('hello')
    resolve('world') // 여기에 작성된 인자가 .then 에서 사용된다.
  })
}
let fn2 = (value) => {
  return new Promise((resolve, reject) => {
    console.log(value)
    resolve()
  })
}

fn()
.then((value)=>{fn2(value)}) 
// resolve로 처리되어 .then에 포함된 내용이 실행된다.
 
// hello
// world -> resolve로 전달된 인자가 value로 전달된다.

promise error handling

.catch

• reject가 실행된 경우 내부의 값을 실행시킨다.
• resolve와 마찬가지로 reject의 인자를 .cacth 내부에서 사용 할 수 있다.
• reject 는 동작이 실패할 경우 즉, 원하는 값을 받지 못한 경우에 사용하여 에러와 정상작동을 분기하는 데에 사용된다.

let fn() // Promise 함수, reject() 실행

fn()
.then(
  () => {console.log('OK')} // resolve 일 때 실행
)
.catch(
  () => {console.log('ERROR!')} // reject 일 때 실행
)

// 'ERROR!'

.finally

• resolve와 reject 여부에 상관없이 마지막에 내부의 값을 실행한다.

let fn() // Promise 함수, reject() 실행

fn()
.then(
    () => {console.log('OK')} // resolve 일 때 실행
)
.catch( 
   () => {console.log('ERROR!')} // reject 일 때 실행
)
.finally(
   () => {console.log('OVER')} // 무조건 실행
)

// 'ERROR!'
// 'OVER'

---

Promise 비동기 처리

• Promise.all 과 Promise.race 는 지정한 promise 들을 한번에 제어한다.

Promise.all

• Promise.all은 순차적으로 전달 하는 것이 아니라 한번에 값을 취합하여 모든 출력값을 배열의 형태로 전달한다.
• 이때 가장 긴시간이 걸리는 promise가 완료되면 먼저 완료된 값들과 함께 전달한다.
• 하나씩 전달하는 것이 아니라, 한번에 전달하므로 비동기

return Promise.all([promise1, promise2])
    .then(([data1, data2]) => {
      return [data1, data2]
    })

return Promise.all([promise1, promise2])
    .then(([...args]) => {
      return [args[0], args[1]]
    })

• 배열의 형태로 반환하므로, 구조분해 할당이나 spread 문법을 사용 할 수 있다.
• Promise.All을 반복해서 사용 할 수도 있으며, 이 경우에는 비동기 처리된 값들을 비동기 처리하는 방식이 되겠다.

Promise.race

• Promise.race는 작성 방법은 Promise.all 과 같지만, 이름과 걸맞게 가장 먼저 로드된 promise 만 전달하고 나머지는 무시한다.

return Promise.all([promise1, promise2])
    .then((fastestData) => {
      return console.log(fastestData)
    })

// 가장 빠르게 로드된 하나의 promise 만 전달한다.