[JavaScript] 프로미스(Promise)란?

📢 프로미스(Promise)란 실행은 바로 하되, 결괏값은 나중에 받는 객체로 비동기 처리에 사용된다. 프로미스를 배우기 전에 먼저 동기, 비동기에 대해 알아보자

 

Synchronous와 Asynchronous

console.log(1)
console.log(2)
console.log(3)
console.log(4)	// 1-> 2 -> 3 -> 4

- 앞 명령이 끝나야 그 다음 명령이 실행되는 걸 "synchronous하다"고 한다.

- 어떤 순서로 실행되는지 파악하기 쉽다는 장점이 있으나, 명령 실행에 시간이 더 걸린다는 단점이 있다.

 

console.log(1)
console.log(2)
setTimeout(function() { console.log(3) }, 5000);
console.log(4)  // 1 -> 2 -> 4 -> 3

- 코드를 실행해보면  setTimeout 함수의 영향으로 5초 동안 console.log(4)의 실행이 지연되는 게 아니라, 4를 출력하고 나서 setTimeout이 실행된다.

- main이 되는 실행순서와는 별개로, 자기만의 시간표에 따라 독립적으로 동작하는 걸 "asynchronous하다"고 한다.

- 여러 명령이 빠르게 실행된다는 장점이 있으나, 코드 실행 순서를 파악하긴 다소 어렵다는 단점이 있다.

 

Synchronous와 Asynchronous의 차이를 그림으로 보면 다음과 같다.

이미지 출처 : Introduction to Synchronous and Asynchronous Processing

 

언제 비동기적 처리를 하는가?

1. 어떤 명령의 실행이 언제 끝날지 예측하기 어려울 때

2. 주가 되는 작업이 아닐 때  예) 통신(다른 작업을 하다가 통신이 끝나면 콜백함수를 실행하는 게 효율적)

 

 

비동기 처리 예시

javascript fetch api : 비동기적 통신 방법

console.log(1)
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(function(response) {
    return response.json();	// json type의 응답 결과를 js typye으로 converting
  })
  .then(function(myJson) {
    console.log(myJson);
  });
console.log(2)	// 1 -> 2 -> response.json

실행 순서

1. console.log(1), console.log(2)가 먼저 실행된다.

2. 통신이 끝나서 json data type을 javascript data type으로 바꾸는 작업이 끝난다.

3. 2의 작업이 완료되면, 콜백 함수가 호출되어 console.log(myJson)이 출력된다.

 

실행 원리 - 프로미스(Promise)란?

Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체다.

Promise 객체는 두 개의 메소드를 사용할 수 있으며 두 메소드 모두 인자로 콜백함수를 받는다.

- then() : fetch를 통해 실행한 결과가 성공했을 때, then으로 전달된 콜백함수가 호출된다.

            fetch 함수의 return 값인 Promise data를 then으로 받으면 response 객체가 전달된다.

            response 객체는 http 헤더, 상태 코드, 응답 body 등의 서버가 클라이언트의 요청에 응답하는 정보를 담고 있다.

- catch() : fetch를 통해 실행한 결과가 실패했을 때, catch로 전달된 콜백함수가 호출된다. 호출 결과, 에러 원인을 출력한다.

＊ fetch 함수의 return 값은 Promise data type인데, 어떤 함수의 return 값이 Promise면 그 함수는 비동기적으로 동작할 가능성이 높다!

var fetched = fetch("https://jsonplaceholder.typicode.com/posts");
 console.log("fetched", fetched);  // Promise data type
fetched.then(function(result){
   console.log(result)  // Response Object
})
fetched.catch(function(reason){
  console.log('reason', reason);  // reason TypeError: fetch failed
})

위 코드를 정리하면 다음과 같다.

// code simplification
fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function(response){
    console.log("response", response.json());
  })
  .catch(function(reason){
  console.log('reason', reason);
  });

 

 

Nested Promise와 Promise Chaining

Nested Promise : then 안에 then을 쓴다. (return 없이)

Promise Chaining : promise를 리턴하면 바깥에서 또 then을 호출할 수 있다.

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function(response){
    response.json().then(function(data) {  // Nested promise
    console.log('data', data);
  })
  .catch(function(reason){
  console.log('reason', reason);
  })

  fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function(response){
    return response.json();   // promise chaining
  })
  .catch(function(reason){
  console.log('reason', reason);
  })
  .then(function(data) {   // promise chaining
    console.log("data", data);
  });

 

 

 

해당 게시글은 생활코딩님의 JavaScript - promise 강의를 참고해 작성했습니다.