제이쿼리 when() 메소드 알아보기

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



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

여러개의 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() 메소드를 사용하여 아래에 작성해보겠습니다.

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

! 꼭 알아야 하는 부분
여기서 하나씩 ajax를 콜하는 것과 다른 차이점으로 아래 사항을 유심히 봐야합니다.

@ $.when()의 응답결과를 resp1, resp2로 전달 받기 위해서는 ajax를 호출하는 함수 전체를 return할 것.
각각의 응답 결과를 처리하는 것이 아니라 when() 다음의 done()을 사용하여 처리하기 위해서는 반드시 ajax 콜 전체를 리턴 받아 처리합니다. 이때 resp1은 배열 형태로 값이 리턴되는데 첫번째 값은 ajax 결과이고 두 번째는 성공, 실패 등을 나타냅니다. 그리고 세 번째는 ajax와 관련된 모든 프로퍼티와 메소드를 담고 있습니다.




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