Promise

Promise

비동기 작업의 완료 또는 실패를 나타내는 객체

callback 방식의 call back 지옥을 해결하기 위해 사용

Promise의 3가지 상태

1. Pending (대기): 초기 상태로, 이 상태에서는 작업이 아직 완료되지 않음
2. Fulfilled (이행): 작업이 성공적으로 완료된 상태로, 결과값이 존재
3. Rejected (거부): 작업이 실패한 상태로, 실패 원인(에러)가 존재

Promise의 장점

• 비동기 처리 시점 명확히 표현
• 연속된 비동기 처리 작업 수정, 삭제, 추가 유연
• 비동기 작업 상태 쉽게 확인 가능
• 유지보수 쉬움

후속 처리 메소드

then

• then 메소드는 두 개의 콜백 함수를 인자로 전달받음
• 첫 번째 콜백 함수: 성공(fulfilled, resolve 함수가 호출된 경우)시에 실행
• 두 번째 콜백 함수: (rejected, reject 함수가 호출된 경우)시에 실행
• then 메소드는 기본적으로 프로미스를 반환

const promise = () => new Promise((resolve, reject) => {
    let a = 1 + 1

    if(a == 3) {
        resolve('success')
    } else {
        reject('failed')
    }
})

promise().then((message) => {
    console.log('This is in the then ' +  message)
}, (error) => {
    console.log('This is in the then ' +  error)
})

catch

• catch 메소드는 비동기 처리 혹은 then 메소드 실행 중 발생한 에러(예외)가 발생하면 호출
• catch 메소드 역시 프로미스를 반환

const promise = () => new Promise((resolve, reject) => {
    let a = 1 + 1

    if(a == 3) {
        resolve('success')
    } else {
        reject('failed')
    }
})

promise().then((message) => {
    console.log('This is in the then ' +  message)
}).catch((error) => {
    console.log('This is in the catch ' + error)
})

Promise chaining

프로미스의 특징 중 하나로, 프로미스 여러 개를 연결하여 사용할 수 있음

then 메소드를 호출하여 아래와 같이 연결

function getData() {
  return new Promise({
// ...});
}

// then() 으로 여러 개의 프로미스를 연결한 형식getData()
getData()
  .then(function(data) {
    // ...
  })
  .then(function() {
    // ...
  })
  .then(function() {
    // ...
  });

Promise.all()

promise.all은 promise가 담겨있는 배열과 같은 이터러블 객체를 인자로 받음

인자로 전달받은 모든 promise를 병렬로 처리하고 그 결과값을 배열에 받아 resolve로 반환함

서로 의존관계이지 않은 여러 프로미스들을 이터러블 객체에 담아 Promise.all 메소드를 이용해 한번에 병렬처리 할 수 있음

가장 마지막으로 끝나는 프로미스를 기준으로 수행되고, 모든 프로미스가 fullfilled 상태가 되면 결과값을 배열에 담아 새로운 프로미스를 반환

Promise.all([
    new Promise(resolve => setTimeout(() => resolve(1), 1000)),
    new Promise(resolve => setTimeout(() => resolve(2), 2000)),
    new Promise(resolve => setTimeout(() => resolve(3), 3000))
]).then(console.log) // 프로그램을 실행하고 3초뒤에 실행됨
.catch(console.log)

[ 1, 2, 3 ]