[JavaScript] Promise

프로미스(Promise)

---

비동기 처리를 위해 사용되는 객체이며, 콜백 패턴의 한계를 보완하기 위해 사용한다.

 

장점

• 비동기 처리 시점을 명확하게 표현 가능
• 연속된 비동기 처리 작업을 수행하기 편하며, 작업 상태를 쉽게 확인 가능
• 코드의 유지보수성이 증가.

 

const promise = () => new Promise((resolve, reject) => {
    let sum = 1 + 1
    if(sum == 2) {
        resolve('correct')
    } else {
        reject('incorrect')
    }
})

promise().then((message) => {
    console.log(message)
}).catch((message) => {
    console.log(message)
})

resolve와 reject
resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다.

resolve(value) : 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

후속 처리 메서드
then
- 두 개의 콜백 함수를 파라미터로 전달받으며, 기본적으로 프로미스를 반환한다.
- 첫 번째 콜백 함수는 성공 시 실행된다.
- 두 번째 콜백 함수는 실패 시 실행된다.

catch
- 비동기 처리 혹은 then 메서드 실행 중 발생한 에러(예외)가 발생하면 호출되며, 프로미스를 반환한다.

 

 

 

프로미스의 상태

---

프로미스는 생성하고 종료될 때 까지 3가지의 상태를 가진다.

위에 작성했던 코드로 프로미스의 3가지 상태를 알아보자.

1. Pending(대기)

비동기 처리 로직이 완료되지 않은 상태

//생성 시 대기상태가 된다.
const promise = () => new Promise((resolve, reject)

2. Fulfiled(이행)

resolve를 실행하면, 이행 상태가 되며, 이행 시 then을 통해 결과값을 받을 수 있다.

const promise = () => new Promise((resolve, reject) => {
    let sum = 1 + 1
    if(sum == 2) {
        resolve('correct')
    } else {
        reject('incorrect')
    }
})

promise().then((message) => {
    console.log(message)
}).catch((message) => {
    console.log(message)
})

3. Rejected(실패)

Fulfiled의 코드에서, 실패 시 reject를 호출하고, 실패 시의 값을 catch로 받을 수 있다.

 

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

 

 

에러 처리방법

---

//then의 두 번째 파라미터로 error를 받아서 처리.
promise().then(message, error);

//catch를 이용한 처리를 더 권장한다.
promise().then((message) => {
    console.log(message)
}).catch((message) => {
    console.log(message)
})

 

 

 

프로미스의 연결 ( Promise Chaining )

---

여러개의 프로미스를 연결하여 사용 가능하다.

then()메서드를 호출하여 새로운 프로미스 객체가 반환되고, 이에 따른 후속처리를 계속 진행할 수 있다.

const url = 'https://jsonplaceholder.typicode.com/posts';    

    // 포스트 id가 1인 포스트를 검색하고 프로미스를 반환한다.
    promiseAjax('GET', `${url}/1`)
      // 포스트 id가 1인 포스트를 작성한 사용자의 아이디로 작성된 모든 포스트를 검색하고 프로미스를 반환한다.
      .then(res => promiseAjax('GET', `${url}?userId=${JSON.parse(res).userId}`))
      .then(JSON.parse)
      .then(render)
      .catch(console.error);

 

 

 

프로미스 사용 예시

---

프로미스를 이용하여 커지는 원을 만들어보자.

See the Pen Untitled by magic (@mag11c) on CodePen.

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise