[javascript] Promise

Promise란?

자바스크립트 비동기 통신에 사용되는 객체중 하나로 비동기 작업의 완료 또는 실패를 나타냄

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

Promise의 이점

• 비동기 처리 시점을 명확하게 표현할 수 있다.
• 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다.
• 비동기 작업 상태를 쉽게 확인할 수 있다.
• 코드의 유지 보수성이 증가한다.

Promise 3가지 상태

Pending(대기) : 비동기 로직이 아직 완료되지 않은 상태

Fullfilled(이행) : 비동기 작업이 처리되어 프로미스가 결과값을 반환해준 상태

rejected(실패) : 비동기 작업이 실패된 상태

후속 처리 메소드

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)
})

프로미스 체이닝

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

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 ]