자바스크립트의 비동기 처리

> 비동기처리란

• 특정 코드 연산이 끝날 때까지 기다리는 것이 아니라, 멈추지 않고 다음 코드를 실행하는 특성
• 서버에서 응답을 언제 줄 지 모르기 때문에 다양한 요청을 비동기로 처리

 

> 문제점

• 비동기 처리 방식은 효율적이지만 때로 문제를 일으킴

  • API에서 응답을 받고 처리해준다던지
  • 페이지가 완전히 로드되기 전에 응답을 받아와 빈 값을 리턴하는 경우가 있었음

 

> 해결방법

1. 콜백함수 사용

   • 그러나 콜백함수는 중첩될 경우 가독성이 떨어지고 로직 변경도 어려움

   • /// 예시
     $.get('url', function(response)) {
           parseValue(response, function(id) {
         	auth(id, function(result) {
                 display(result, function(text) {
                     console.log(text)\;
                 });
             });
     	});
     });
     

2. Promise 사용

3. Async 사용

위 콜백 중첩을 분리하더라도 2, 3번 방법이 낫다.

 

> Promise란?

• Promise 객체는 비동기 작업이 맞이할 미래의 결과 값의 대리자
• 동기 메서드처럼 값을 반환
• 최종 결과를 반환하는 것은 아님
• 이행 또는 거부됐을 경우 setteld(처리)되었다고 표현

 

> Promise의 3가지 상태

1. Pending

   • new Promise(function(resolve, reject){}); 메서드를 호출한 상태

2. Fulfilled

   • 펜딩 상태에서 콜백함수의 resolve를 실행하게 되면 이행 상태가 된다.
   • 이때 getSomething().then(function(){});과 같이 then()을 이용해 값을 받을 수 있게 된다.

3. Rejected

   • reject를 받게 되면 실패 상태가 되며 getSomething().then().catch(function(err){}); 에러를 인자로 받을 수 있다.
   • catch()가 아닌 then()의 두번째 인자로 에러를 처리해도 되지만 에러를 못잡는 경우와 가독성을 위해 가급적 catch()로 처리해주자.

참고- mdn, 캡틴판교님 블로그