TIL.94 Javascript_Promise 이해하기

Promise?

“A promise is an object that may produce a single value some time in the future”

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미

 

Promise가 필요한 이유?

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다.

$.get('url 주소/products/1', function(response) {
  // ...
});

위 API가 실행되면 서버에다가 ‘데이터 하나 보내주세요’ 라는 요청을 보내죠. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다.

이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다.

또한 비동기 처리에서의 함수를 순서대로 동작시키위해 콜백 함수 형태를 사용하는데 계속 계속 이어지는 콜백의 형태인

"콜백 지옥"을 해결하기 위해 프로미스를 사용한다.

---

프로미스는 다음의 세 가지 상태 중 하나로 존재한다.

• Pending(대기): 초기 상태로 이행도 실패도 되지 않은 상태
• fullfiled(이행): 비동기 처리가 성공적으로 완료된 상태
• rejected(실패): 비동기 처리가 실패한 상태

new Promise(function(resolve, reject) {
  // executor 
});

new Promise()를 호출하면 프로미스가 생성되고 대기(pending) 상태로존재한다.

호출 시 자바스크립트가 제공하는 resolve함수와 reject함수를 인자로 갖는 콜백 함수를 선언할 수 있다.

new Promise에 전달되는 함수는 executor라고 부른다. 

new Promise가 생성되면 executor가 자동으로 구동된다. 이 함수는 어떠한 결괏값을 만들어낼 것이다.

함수의 작동-보통 시간이 소요되는 비동기 처리-이 끝나면 resolve(value)나 reject(error) 중 하나를 호출하여 결괏값을 생성하는데,

작업이 성공적으로 완료되면 resolve, 실패하면 reject를 호출한다.

resolve가 호출되면 생성 시 초기 상태인 pending이 fullfilled로,reject가 호출되면 rejected로 바뀐다.

executor는 하나의 resolve또는 reject함수만을 호출하며, 하나의 인자만을 받는다. 추가적인 호출 및 인자는 무시된다.

reject함수의 인자는 무엇이든 될 수 있지만 Error객체가 권장된다.

 

---

.then

then의 첫번째 인자는 함수이며, 비동기 처리가 성공하면 그 결괏값을 받아 작동한다. 두 번째 인자는 비동기 처리 실패 시 오류를 받아 작동하는 함수이다. 두 번째 인자는 사용하지 않아도 된다.

promise.then(
  function(result) { /* handle a successful result */ },
  function(error) { /* handle an error */ }
);

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000);
});

// resolve runs the first function in .then
promise.then(
  result => alert(result), // shows "done!" after 1 second
  error => alert(error) // doesn't run
);

 

---

.catch

오류 결괏값을 알고 싶다면 .catch(errorHandlingFunction)를 이용할 수 있다.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("Whoops!")), 1000);
});

// .catch(f) is the same as promise.then(null, f)
promise.catch(alert); // shows "Error: Whoops!" after 1 second

 

출처:velog.io/@bitalkil/Promise

Promise

joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기