제이쿼리(jquery)에서 사용하는 when() 메소드에 대하여 알아봅니다.




# 제이쿼리 when() 메소드제이쿼리의 when()은 ajax의 결과를 리턴받아 처리하도록 도와줍니다. 즉 ajax를 사용하는 경우 발생하는 Promise 객체를 처리할 수 있습니다. 아래는 간단한 문법입니다.
$.when(ajax1, ajax2, ...).done(function(resp1, resp2, ...) {
  ...
});

여러개의 ajax를 ajax1, ajax2와 같이 사용하고 뒤의 콜백에서 resp1, resp2...로 결과를 처리합니다.



! when()은 언제 사용하는가?보통 하나의 ajax를 호출하는 경우보다는 여러개의 ajax 콜이 필요한 웹사이트에서 단계적으로 또는 동시에 결과를 처리하기 위해서 많이 쓰입니다.

- 순차적으로 ajax 결과에 따라 다른 ajax를 수행하는 경우
- 여러 ajax의 결과가 함께 필요한 경우

이처럼 when()이 필요한 이유는 ajax가 비동기식 통신이므로 모든 ajax의 처리가 언제될 지 알 수 없기 때문입니다. 이런 이유로 when() 사용하여 Promise 객체를 처리할 수 있습니다.



# 제이쿼리 when() 예제보기그럼 간단한 예제를 사용하여 알아보겠습니다. 만약 쇼핑몰 사이트에서 특정한 사용자에게 쿠폰을 지급하기 위해서 두 개의 api를 사용하여 하나는 사용자의 정보를.. 다른 하나는 현재 가입되어 있는지를 확인해야한다면?? 이 경우 결과가 둘 다 true인 경우에만 Okay라는 문구를 출력하는 코드를 작성해보겠습니다. 아래처럼 각각 api가 존재한다고 생각합니다

api1 : /userInfo/
api2 : /isValidUser/

이제 위 두 개의 api의 결과를 동시에 처리하도록 함수 isOkay() 함수를 when() 메소드를 사용하여 아래에 작성해보겠습니다.
function isOkay() {
  var api1 = "/userInfo/";
  var api2 = "/isValidUser/";
  
  var ajax1 = return $.ajax(api1);
  var ajax2 = return $.ajax(api2);

  $.when(ajax1, ajax2, ...).done(function(resp1, resp2, ...) {
    if (resp1.data.result == true && resp2.data.result == true) {
      alert('Okay');
    };
  });
};

위 예제를 살펴보면 ajax1 그리고 ajax2의 결과를 when()을 사용하여 그 결과 resp1, resp2가 모두 true인 경우에만 Okay를 출력하는 간단한 예제입니다.




# 마치면서마이크로 서비스로 구현되었거나 여러개의 ajax 콜이 필요한 웹 서비스의 경우 이처럼 when()을 사용하여야합니다. 이런 방식은 ajax나 react, vuejs 등의 프론트엔드에서도 모두 찾을 수 있습니다. 매우 자주 사용되므로 중요합니다.