[JS] Promise 객체 이해 및 체이닝에 대해 이해하기

• promise란?
• promise이용하기

---

 

Promise란?

Promise는 JavaScript에서 비동기 작업을 수행할 때 사용하는 객체이다.

Promise는 어떤 결과를 보장하는데, 그 결과는 성공이 될 수도 있고, 실패가 될 수도 있다.

 

세 가지 상태가 있는데 다음과 같다

 

1. Pending(대기상태): 아직 실행 중인 상태이다.

2. Fulfilled(작업성공): 작업한 결과가 성공적으로 완료된 상태.

3. Rejected(작업실패): 작업한 결과가 실패한 상태.

 

 

Promise활용

많은 메소드가 promise를 반환한다. 대표적으로 fetch()가 있으며 궁금하면 더 찾아보기를 바란다.

Promise는 체이닝을 하여 코드를 작성하는데, 다음과 같은 형식으로 작성된다.

fetch('http://api.example.com/data')
  .then((response) => { response.json()})  // 1번 then()
  .then((data) => {		// 2번 then()
    console.log(data);
    }
  .then(() => console.log('promise 끝~'))	// 3번 then()
  .catch(error => console.log(error))		 // catch()

 

.then()

.then(( parameter ) => { }) 기본적으로 이런 형식으로 작성되며, parameter(파라미터) 로는 이전 promise의 작업성공의 결과물을 가지게 된다. 

 

더보기: 코드 하나씩 리뷰

실행순서

 

1. fetch() 메소드는 웹에서 리소스를 가져와서 그 결과물을 promise에 담아서 리턴한다.

2. 1번 then()은 인자로 그 전 작업의 결과물을 받는다. 즉 이전에 결과물을 Promise에 담아서 리턴했던 것을 인자로 받는다. 이 인자를 1번 then()에서는 'response' 라고 이름을 지었다.

3. 1번 then()에서는 인자로 받은 것을 어떠한 처리를 하고있다. (response.json()에 대해서는 나중에 배울 것, 혹은 직접 찾아보세요). 이 처리가 성공적으로 끝나면 변환된 결과를 다시 Promise에 담아 리턴한다.

4. 2번 then()에서는 1번 then()에서 처리하고 담은 promise의 결과를 인자로 받고, 이 인자를 data 라고 이름을 짓는다.

5. 콘솔에 data를 표시한다.

6. 2번 then() 에서 리턴되는 값이 없으므로 인자는 undefined가 된다. 인자를 받지 않고 콘솔에 'promise 끝~'을 표시한다.

// 6번이 가장 중요하다고 생각되는데, 실행순서 3번을 보면 결괏값을 다시 Promise에 담아 리턴하는 메서드가 존재한다. 쉽게 말해 처음에 fetch가 리턴했던 Promise를 갈아치운다고 보면 된다.

7. catch()는 혹시 중간에 에러가 발생하면 그 에러를 catch()의 인자로 전달하고 콘솔에 표시한다.

.catch()

중간에 에러가 발생하면 error을 인자로 받고 처리한다.