Promise 기초 (Javascript)

 

 

 

 

동기/비동기를 학습하였다면 callback 함수, Promise, async/await 등을 들어봤을 것이다.

이번 게시물에서는 Promise를 살펴보도록 하자. 

 

 

필자는 학습하기 전에는 Promise가 무엇인지 어렴풋이 알기만 하고 실제로 어떤 것인지 어떻게 사용하는지에 대해서는 자세히 알지 못했다.

 

간단히, 비동기적인 작업을 보다 구조적이면서, callback 지옥을 피하고 가독성 있는 코드를 작성할 수 있게 도와준다. 정도로만 생각하고 막상 설명을 하려니 구체적인 그림이 떠오르지 않았다.

 

책과 MDN, Blog 등을 통해 학습을 한 지금 역시 정리가 잘 되지 않아 실망스러운 상태다.

해당 게시물을 읽는 분들은 부디 학습에 도움이 되는 글이기를 바란다.

 

 

 

 

 

---

 

 

 

 

- Promise란?

어떠한 작업의 중간 상태를 나타내는 객체 (추후에 결과가 반환된다는 약속을 해주는 객체로 볼 수 있다)
비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다 (출처, MDN)
성공과 실패 그리고 그 값들이 무엇인지 알기 위한 객체로 생각하면 좋겠다.

 

 

 

 

 

- Promise의 상태

Promise 객체는 반드시 3가지 상태 중 한가지 상태를 갖는다. 이행이나 거부 상태가 되면 더 이상 상태를 바꿀 수 없다.

1. 대기(pending): 이행하거나 거부되지 않은 초기 상태, 즉 약속된 결과 값이 반환되지 않은 상태

2. 이행(fulfilled): 연산이 성공적으로 완료된 상태

3. 거부(rejected): 연산이 실패한 상태

 

 

 

 

 

- Promise 구성 (인자, 함수, 메소드)

Promise는 하나의 콜백함수(executor, 실행자 함수)를 인자로 받는다. 실행자 함수는 또 2개(resolve, reject)의 함수를 인자로 받는다.

 

    비동기 작업이

1) 성공했을 시 그 성공 값을 인자로 resolve 함수를 호출  ->  .then()

2) 실패했을 시 그 실패 값을 인자로 reject 함수를 호출  ->  .catch()

 

 

 

Promise 객체의 결과 값은 내부 속성이기 때문에 직접 접근이 불가하고 then, catch 메서드를 통해서만 접근이 가능

1) then 메서드는 인수에 하나만 전달하여, 비동기 작업이 성공적으로 처리된 경우에 다루고

2) catch 메서드는 작업이 실패했을 경우 사용하여 제어한다.

 

 

 

 

 

 

 

 

👿 글로만 보면 이해가 잘 가지 않을 것이다. 예로 된 코드를 보자.

- 예제1 

Promise의 이해를 돕기위해,

1) Promise는 무엇인지

2) .then() 메소드와 .catch() 메소드

에 대한 간단한 설명이다.

 

실제로는 아래와 같이 코드가 쓰이진 않고 설명을 위한 코드인 것을 감안해서 봐주시길 바란다.

 

예제1

 

 

 

 

 

- 예제2

예제1의 코드가 실제로는 어떻게 코드로 작성되는지 참고해주세요.

response.json.()는 Promise를 반환합니다.

예제2, 왼쪽은 Nested promise 방식 오른쪽은 Promise chaining 방식을 보여주는 코드이다

 

 

 

 

 

- 예제3

new Promise를 사용한 Promise 객체 생성 방법이다.

예제3의 첫 이미지 코드를 보면, resolve만 적용을 해놓았는데 

.catch()를 제대로 쓰기 위해서는 reject부분도 작성하여 예외 상황을 적절하게 처리하길 바란다.

 

예제3, Promise가 return되는 함수를 정의했다.

 

예제3, 정의된 함수를 사용한 코드이다. 왼쪽은 Nested promise 방식 오른쪽은 Promise chaining 방식을 보여주는 코드이다

 

 

 

더해서

.finally()

Promise.all()

Promise.reject()

등 해당 게시글에 작성하지 못한 지식들 또한 존재하니, 학습을 위해 한번씩 찾아보길 권장한다.

 

 

 

 

 

---

 

 

 

 

 

👻 마지막으로

Promise는 콜백지옥 해결뿐만 아니라
1) retrun된 값을 활용할 수 있다는 점과
2) then, catch 등을 통해 error에 대한 대처가 간결해졌다는 것을
알아가면 좋을 것 같다.

 

 

 

 

 

 

참고 자료:

유튜브 생활코딩, JavaScript - Promise (then, catch)

유튜브 생활코딩, JavaScript Promise2 - new Promise

velog, maxlchan.log - 비동기 프로그래밍(콜백, Promise, async/await)