JS Promise를 사용한 비동기 처리

비동기 처리

비동기 처리란 코드가 끝나기를 기다리지 않고 다음 코드를 실행하는 것을 말합니다.

 

 

비동기 처리 예제

setTimeout(function(), ms)

      console.log("first");

      setTimeout(function () {

        console.log("second");

      }, 3000);

      console.log("third");

      

위 예제 코드에 대한 결과는 다음과 같습니다.

• "first" 출력
• "third" 출력
• "second" 출력

setTimeout은 지정한 초(예제에서는 3초) 만큼 기다린 후에 코드가 실행됩니다. 하지만 비동기 방식으로 실행되기 때문에  기다리는 동안 다음 코드가 실행됩니다.

 

 

Promise 사용 전 비동기를 위한 방법: 콜백 함수

JS에서 비동기 처리에 대한 글을 보면 콜백 함수에 대해 먼저 이야기하는 곳이 많은 것을 확인할 수 있습니다. 함수가 다른 함수를 호출하는 콜백 함수를 이용하게 된다면 함수가 다른 함수를 기다려야 하는 비동기 함수에서 유용하기 때문입니다.

 

하지만 이러한 방식은 볼륨이 커질수록 콜백 안에 콜백을 계속 무는 형식이 되어 가독성이 떨어집니다. 또한 디버깅하기도 어렵고, 유지보수 정도도 떨어집니다. 때문에 JS에서는 Promise나 Async를 사용하여 콜백 함수의 문제를 해결합니다.

 

---

Promise

promise는 JS에서 비동기 처리에 사용되는 객체입니다.

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

        setTimeout(function() {

          resolve("성공 시 Data 값");

        }, 3000);

      });

      myPromise.then(function(value) {

        console.log(value);

      });

 

코드 결과가 성공인 경우 resolve, 실패인 경우 reject를 호출합니다.

Promise를 이해하기 위해선 이를 구성하는 resolve, reject, then에 대해서 알아야합니다. 이를 설명하기 위해서 Promise의 객체 상태와 같이 설명하도록 하겠습니다.

 

 

Promise 객체 속성

Promise 객체는 생성하고 종료될 때까지 3가지의 상태를 갖습니다.

1.  대기(Pending) - 비동기 처리가 완료되지 않은 상태 (undefined)
   • new Promise() 객체를 생성한 상태입니다.
2.  이행(Fulfilled) - 비동기 처리 로직이 완료되어 Promise가 결과 값을 반환한 상태
   • resolve()가 실행하고 결과가 나온 상태입니다.
   • resolve()의 결과 data를 then()의 value로 받습니다.
3. 거부(Rejected) - 비동기 처리 로직이 실패 혹은 오류 발생하여 Promise가 오류 정보를 반환한 상태
   • reject()가 호출하면 실패 상태가 됩니다.

     

      myPromise.then().catch(function(err) {

          console.log(err);

      });

 

 

 

Promise 에러 처리 방법

실패하거나 오류가 발생하는 경우 Promise에서 에러 처리하는 방법은 두 가지가 있습니다. 

아래 두 가지 방법 중 catch()로 에러를 처리하는 것이 첫 번째 방법에 비해 예외 처리 상황에 잘 대처할 수 있기 때문에 catch() 방식을 이용하는 것을 권장합니다.

 

방법1: then()의 두 번째 인자로 에러 처리

     

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

        setTimeout(function() {

          reject("실패 시 Data 값");

        }, 3000);

      });

      myPromise.then(

        function (value) {console.log(value);},

        function (error) {console.log(error);}

      );

 

 

방법2: catch() 이용하기 

      myPromise

        .then(function (value) {

          console.log(value);

        })

        .catch(function (error) {

          console.log(error);

        });

       

 

 

Promise Chaining

Promise의 특징은 만약 then()에서 Promise 객체를 반환하게 된다면 여러 개의 Promise를 연달아 사용할 수 있습니다. 

 

아래 예제에서 오류가 발생할 일은 없지만 예제일 뿐이므로 그냥 봐주시길 바랍니다. 

이 처럼 .then()에서 반환한 결과값을 다음 .then()으로 넘겨 주어 다음과 같이 값이 출력되게 됩니다.

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

        setTimeout(function () {

          resolve(1);

        }, 3000);

      });

      myPromise

        .then(function (value) {

          console.log(value);     // 1

          return value * 2;

        })

        .then(function (value) {

          console.log(value);     // 2

          return value * 2;

        })

        .then(function (value) {

          console.log(value);     // 4

          return value * 2;

        })

        .catch(function (error) {

          console.log(error);

        });