Promise

Promise가 뭔가요?

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고

다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.

 

일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 API를 사용하는데,
API가 실행되면 서버에다가 데이터 보내달라는 요청을 보내고,
보내온 데이터의 반환값이나, 에러상황을 처리하기 위해 프로미스를 사용한다.

---

promise를 사용한 비동기 처리

function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {   // setTimeout <- api 통신 가정하에 1초뒤에 실행되는걸 나타내기 위함
      resolve("i'm here!!");
    }, 1000);
  })
}

async().then(res => {
  console.log(res);
});

promise를 사용하게 되면 resolve는 성공했을 때, reject는 에러가 발생 했을 때

첫 번째 인자( 위의 예시에서는 res )로 어떠한 값을 넘길 수 있다.

resolve는 .then의 첫 번째 인자로, reject는 .catch의 첫 번째 인자로 들어간다.

 

위 예시에서 async 함수를 실행하면 1초 후 첫 번째 인자에 "i'm here!!" 이 들어간 resolve가 실행이 되며.

이 인자는 .then의 첫번째 인자는 함수이고, 이 함수의 첫 번째 인자로 받아서 콘솔에 찍히게 된다.

then

.then은 프로미스에서 가장 중요하고 기본이 되는 메서드.

promise.then(
  function(result) { /* 결과(result)를 다룹니다 */ },
  function(error) { /* 에러(error)를 다룹니다 */ }
);

.then의 첫 번째 인수는 프라미스가 이행되었을 때 실행되는 함수이고, 여기서 실행 결과를 받으며.

.then의 두 번째 인수는 프라미스가 거부되었을 때 실행되는 함수이고, 여기서 에러를 받는다.

 

💫예시

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

// resolve 함수는 .then의 첫 번째 함수(인수)를 실행합니다.
promise.then(
  result => alert(result), // 1초 후 "완료!"를 출력
  error => alert(error) // 실행되지 않음
);

첫 번째 함수 실행.

프라미스가 거부된 경우에는 아래와 같이 두 번째 함수가 실행.

작업이 성공적으로 처리된 경우만 다루고 싶다면 .then에 인수를 하나만 전달.

 

catch

에러가 발생한 경우만 다루고 싶다면 .then(null, errorHandlingFunction)같이 null을 첫 번째 인수로 전달하면 됩니다. 

.catch(errorHandlingFunction)를 써도 되는데, .catch는 .then에 null을 전달하는 것과 동일하게 작동합니다.

let promise = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error("에러 발생!")), 1000);
});

// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(alert); // 1초 뒤 "Error: 에러 발생!" 출력

.catch(f)는 문법이 간결하다는 점만 빼고 .then(null,f)과 완벽하게 같습니다.

function check(key) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (key === true) resolve("i'm here!!");
      else reject(new Error("No I'm not here"))
    }, 1000);
  })
}

check(true)
  .then((result) => { console.log(result); })
  .catch((error) => { console.log(error); });

 

프로미스를 사용하게 되면 프로미스 객체에 비동기가 처리된 결과값이 저장됩니다.
콜백의 경우 매번 비동기를 실행해야지 그 값을 출력할 수 있지만
프로미스는 .then 메소드를 통해서 저장되어 있는 값을 원하는 때에 사용할 수 있습니다.

 

---

프로미스의 3가지 상태(states)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)이다.

상태란 프로미스의 처리 과정을 의미하며, new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

먼저 아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.

new Promise();

 

 

new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

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

 

Fulfilled(이행)

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 되며.

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

이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    var num = 1;
    resolve(num);
  });
}

// resolve()의 결과 값 num을 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 1
});

※ 프로미스의 '이행' 상태를 좀 다르게 표현해보면 '완료' 이다.

 

Rejected(실패)

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했습니다. 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 됩니다.

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

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있습니다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

 

프로미스 처리 흐름 - 출처 : MDN

 

---

promise(프로미스)와 콜백 함수 방식과 차이로는

callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없습니다. 하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해집니다.

또,

Promise 클래스는 비동기 처리만을 위해 만들어졌기 때문에 클래스에 resolve나 reject 함수들이 잘 정의되어 있고 이를 잘 활용하기만 하면 되지만, callback pattern은 자유도가 높지만 template이 존재하지 않기 때문에 코드가 복잡해지고 에러 처리 같은 작업들이 어렵습니다.

추가적으로 비동기 처리를 위해 최근에 나온 async & await 문법이 있으며,
존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와줍니다

 

 

 

📚출처

---

https://danbom425.tistory.com/34

https://goodmemory.tistory.com/17

https://jcon.tistory.com/189

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

https://ko.javascript.info/promise-basics

https://ko.javascript.info/callbacks

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