동기(Sync)와 비동기(Async) { Promise }

• Promise 객체를 사용하면 비동기 함수를 깔끔하게 처리할 수 있다.
  
  무슨 말일까?
  
  함수가 호출되어 서버에 요청하는 과정과 이후 처리하는 과정을 분리할 수 있게 된다는 것을 의미한다. 
  
  우선 왜 Promise 를 사용하게 되었는지 아래 예제를 통해 이해하고 넘어가자. 
  
  주석만 읽어도 된다. 

const result = true;

const sec = 3;

setTimeout(function() { // callback 함수

    if(result) {

        console.log('성공');

    } else {

        console.error('실패');

    }

}, sec * 1000);

// setTimeout() 과 같은 비동기 함수의 결과를 콜백함수로 바로 처리하면,

// 콜백 함수의 내용이 길어질수록 가독성이 떨어지게 된다.

// 무슨 말이냐면 setTimeout 함수와 call back 함수가 붙어서 작성되어야

// 하는데, 실제로 call back 함수가 실행되는 것은 시간이 흐름 뒤다.

// 따라서 실제 작동하는 시간대로 코드를 볼 수 없게 되어 가독성이 떨어진다는

// 의미이다.

• Promise 를 사용하게 되면 Primise 상태가 pending 상태가 된다. 대기 상태가 된다는 뜻이다.
  
  서버에 응답을 받으면 성공한 경우 fulfilled 상태가 되고 실패한 경우 reject 상태가 된다. 
  
  fulfilled 상태에서는 then 이 실행되고 reject 상태에서는 catch 가 실행된다.  

const result = false;

const sec = 3;

const promise = new Promise((resolve, reject) => {

    setTimeout(() => {

       if(result) {

            resolve('성공');

       }  else {

            reject('실패');

       }

    }, sec * 1000);

})

// Promise 객체를 만들었는데, resolve 와 reject 인자는

// Promise 객체를 만들 때 자동 생성되어 자연스럽게 사용할 수 있는

// 인자들이다.

// 이 인자들에 대해서 생각을 해보자. resolve 와 reject 의 역할은 다음과 같다.

// Promise 객체를 사용하는 이유는 후처리를 분리하기 위해서이다. 그렇다면

// 후처리 코드 입장에서는 비동기 함수의 작업이 끝났는지 안끝났는지 알 방법이 없다.

// 이때 비동기 함수의 작업이 끝났다는 알람의 역할을 하는 것이 resolve 와 reject 이다. 

// 요청에 대해 성공했다면 resolve를 호출하면 되고

// 실패했다면 reject를 호출하면 promise 객체를 만드는 부분은

// 끝났다. 후처리는 이후에 작성해줄 수 있게 된다.

// 요청에 성공하면 then 메시지 전달 후 남은 작업 실행

// 요청에 실패하면 catch 메시지 전달 후 남은 작업 실행

promise

.then((message) => {

    console.log(message);

})

.catch((error) => {

    console.log(error);

});

// 후처리 작성을 위해서는 then 과 catch 를 사용한다.

// 여기서 message 와 error 는 resolve 와 reject 에 인자로 넣어준

// 문자가 출력된다.

// 실제로 웹 서버를 사용할 때는 웹 서버가 돌려준 메시지가 출력된다.

// 후처리 함수에서 then 은 then 에 해당하는 promise 객체를 실행이 끝난 뒤

// 반환하고 이것을 catch 가 받아서 실행하게 된다.

// 이것을 chaining 기술이라고 한다. 이 기술은 Java 에서도 사용된다.

 

• promise 를 활용하는 방식은 aJax 를 사용할 때 특히 강점이 두드러진다. ajax 를 사용할 때는 입력해주어야 하는 것들이 많은데, ajax 함수 안에 엄청 긴 인자와 성공했을 때 해야하는 일과 실패했을 때 해야하는 일이 같이 들어가야 한다. 그래서 함수가 엄청 길어지면서 가독성이 엄청나게 하락하는데, promise 객체를 사용해서 ajax 호출과 응답을 받았을 때 실행되는 코드를 분리시켜서 가독성을 향상 시킬 수 있게 된다. 

 

• 이런 후처리를 나누는 것은 회원가입 시 아이디 중복체크 할 때 사용된다. 
  
  예를 들어 아이디가 중복되었다면 회원가입 버튼이 비활성화 되는 등 후처리 작업이 필요하다. 
  
  이럴 때 사용된다. 

let promise = new Promise(function(resolve, reject) {

    resolve();

});

promise

.then(function() {

    console.log('Success 1');

})

.then(function() {

    console.log('Success 2');

})

.catch(function() {

    console.log('Error 1');

})

 

• 이 문제를 통해 resolve 와 reject 의 특징을 느낄 수 있다. Promise 객체를 만들면서 본 함수로 resolve( ) 함수를 실핼 시켰다. 이 말은 resolve 즉 요청이 성공했다는 것을 후처리 코드들에게 알려주었다는 것을 의미한다. 
  그래서 후처리 코드 중에서 then 에 해당하는 모든 코드들이 실행되게 된다. 
• then 에 해당하는 모든 코드가 실행되는데, 왜 여러 then 으로 작성하는 걸까?
  코드의 분리가 목적인 것이라고 이해할 수 있다. 

let promise = new Promise(function(resolve, reject) {

    resolve();

});

 

promise

.then(function() {

    console.log('Success 1');

})

.then(function() {

    console.log('Success 2');

})

.catch(function() {

    console.log('Error 1');

})

 

promise

.then(function() {

    console.log('Success 3');

})

.then(function() {

    console.log('Success 4');

})

•  위와 같이 Promise 객체를 따로 작성하여 코드를 분리시켜 줄 수도 있다. 
  
  Promise.then(){} 에서 then 은 Promise 객체를 반환시킨다고 했다.
  
  그래서 Promise.then(){}.then(){}.catch(){} 와 같은 코드가 실행 가능했다는 것이다. 
  
  즉, Promise.then(){}.then(){} 라는 코드는
  
  Promise.then(){} 
  Promise.then(){}
  
  와 전혀 다를게 없는 코드라는 것을 의미한다. 따라서 Promise 객체를 따로 생성해서 코드를 분리시켜 가독성 향상을 획득할 수 있다. 

• 출력 결과를 보면 then 에 해당하는 후처리 코드들이 모두 실행된 것을 볼 수 있다.