[javascript] Promise

https://imswengineer.tistory.com/118

[javascript] 비동기 처리

https://imswengineer.tistory.com/119

[javascript] 콜백함수

 

콜백함수를 여러번 중첩해서 사용하게 되면 콜백지옥을 경험하게 되고,

콜백지옥은 가독성이 떨어지고 로직을 변경하기에도 어렵다.

그것을 해결하기 위해 Promise 를 사용하는데, Promise 에 대하여 알아보자.

 

Promise란 ?

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

 주로 서버에서 데이터를 받아 화면에 표시할 때 사용한다.

 

<promise 예제 코드> - ajax사용시 promise를 적용한 예

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

new Promise(), resolve(), then()을 기억하자.

 

프로미스의 3가지 상태

1.Pending ( 대기 ) : 비동기 처리 로직이 아직 완료되지 않은 상태

➡️new Promise() 메서드를 호출하면 대기 상태가 된다. 호출 할 때, 콜백함수를 선언할 수 있고, 콜백함수의 인자는 resolve, reject 이다.

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

 

 

2. Fulfilled ( 이행 ) : 비동기 처리가 완료되어 Promise가 결과값을 반환해준 상태

➡️ 콜백함수의 인자  resolve를 실행하면 이행 상태가 된다.

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

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

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

 

 

3. Rejected ( 실패 ) : 비동기 처리가 실패 또는 오류가 발생한 상태

➡️ new Promise()로 프로미스 객체를 생성하면 콜백함수 인자로 resolve와 reject를 사용할 수 있다 하였다. reject를 호출하면 실패 상태가 된다.

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 연결하기 ( Promise Chaining )

 

프로미스가 then() 메서드를 호출하고 나면 새로운 프로미스 객체가 반환된다. 그래서 다시 then()을 또 호출하면 여러개의 프로미스를 연결해서 사용할 수 있다.

function getData() {
  return new Promise({
    // ...
  });
}

// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
  .then(function(data) {
    // ...
  })
  .then(function() {
    // ...
  })
  .then(function() {
    // ...
  });

 

 

 

프로미스의 에러처리방법

1. then()의 두번째 인자로 에러를 처리

getData().then(
  handleSuccess,
  handleError
);

2. catch()이용

getData().then().catch();

 

 

function getData() {
  return new Promise(function(resolve, reject) {
    reject('failed');
  });
}

// 1. then()의 두 번째 인자로 에러를 처리하는 코드
getData().then(function() {
  // ...
}, function(err) {
  console.log(err);
});

// 2. catch()로 에러를 처리하는 코드
getData().then().catch(function(err) {
  console.log(err);
});

 

코딩스타일에 따라 2가지 방법을 쓸 수 있겠지만 가급적이면 catch()를 사용하는게 좋다.

그 이유는, then()의 첫번째 콜백함수 내부에서 오류가 나는 경우 제대로 잡아내지 못하는 경우가 발생한다.

 

<then()의 두번째 인자로 오류를 잡을 때>

// then()의 두 번째 인자로는 감지하지 못하는 오류
function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result);
  throw new Error("Error in then()"); // Uncaught (in promise) Error: Error in then()
}, function(err) {
  console.log('then error : ', err);
});

'에러를 잡지 못했습니다(Uncaught Error)' 로그

 

<catch()를 사용하는 경우>

// catch()로 오류를 감지하는 코드
function getData() {
  return new Promise(function(resolve, reject) {
    resolve('hi');
  });
}

getData().then(function(result) {
  console.log(result); // hi
  throw new Error("Error in then()");
}).catch(function(err) {
  console.log('then error : ', err); // then error :  Error: Error in then()
});

발생한 에러를 성공적으로 콘솔에 출력한 모습

 

 

아래의 블로그에 더 깔끔하게 정리되어 있어요 ^_^..ㅎ

 

참조 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94

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