반응형
1. 이론 - Jquery Promise 객체
- Promise 객체는 비동기 방식의 통신에서 발생하는 에러를 해결하기 위해 사용하는 객체
- 비동기 방식에서는 가끔 서버에서 데이터를 다 받아오기전에 화면에 표출하려고 하는 문제가 발생하는데
이러한 문제들이나 콜백 지옥 같은 문제들을 해결하는데 Promise 객체를 사용하게 됨
- Promise 객체를 통한 콜백 지옥 해결
ajax를 호출하고 리턴 받는 jqXHR 객체를 통해 새로운 ajax를 추가해주고
.then() 메소드를 통해서 다음 ajax를 호출하도록 설정
then() 메소드
ajax1------------->
ajax2------------->
ajax3------------->
2. 실습 - jsPromise (콜백 지옥 해결법)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - GET방식</title>
</head>
<body>
<button type="button" onclick="reqList();">조회</button>
<button type="button" onclick="delList();">삭제</button>
<p id="resp"></p>
<Script>
function reqList() {
//promise 객체의 then메소드를 통한 콜백 지옥 해결
//리턴 받는 jqXHR객체에 다음 ajax를 할당하여 then메소드로 처리
$.get("/contact/list_long.do", { pageno : 1 }).then(function(data) {
console.log("page1 success : " + (new Date()).toLocaleTimeString());
console.log(data);
return $.get("/contact/list_long.do", { pageno : 2 });
}).then(function(data) {
console.log("page2 success : " + (new Date()).toLocaleTimeString());
console.log(data);
return $.get("/contact/list_long.do", { pageno : 2 });
}).then(function(data) {
console.log("page3 success : " + (new Date()).toLocaleTimeString());
console.log(data);
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</Script>
</body>
</html>
3. 이론 - Jquery when() 메소드
- when()메소드는 ajax의 결과를 리턴받아 콜백을 처리해주는데 여러 개의 요청을 보낸 후 모든 응답이 왔을 때 콜백 함수를 처리한다.
- when() 메소드는 주로 여러 개의 ajax 요청을 보낼 때 사용
$.when(ajax1, ajax2, ajax3).done(function(resp1, resp2, resp3) {
...
});when() 메소드
ajax1-------------------->
ajax2----->
ajax3------------->- 모든 응답이 들어왔을 때, .done() 메소드에서 콜백 처리
4. 실습 - jqWhen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.6.0.min.js"></script>
<title>Ajax 사용 - GET방식</title>
</head>
<body>
<button type="button" onclick="reqList();">조회</button>
<button type="button" onclick="delList();">삭제</button>
<p id="resp"></p>
<Script>
function reqList() {
//when() 메소드를 통해 호출할 ajax 2개 선언
var jqXHR0 = $.get("/contact/list_long.do", { pageno : 1 });
var jqXHR1 = $.get("/contact/list.do", { pageno : 3, pagesize : 5 });
//data0, data1 -> 데이터 타입은 Array객체
//data0[0], data1[0] -> String type
//JSON.parse() -> String을 Json 객체로 변환
$.when(jqXHR0, jqXHR1).done(function(data0, data1) {
console.log(data0);
console.log(data1);
console.log("-------------------------------");
console.log(data0[0]);
console.log(data1[0]);
console.log("-------------------------------");
var obj0 = JSON.parse(data0[0]);
var obj1 = JSON.parse(data1[0]);
console.log(obj0);
console.log(obj1);
var totalCount = obj0.contacts.length + obj1.contacts.length;
console.log("2번의 요청으로 조회된 데이터 건수의 합 : " + totalCount);
});
}
function delList() {
//p요소 초기화
$("#resp").html("");
}
</Script>
</body>
</html>
- when() 메소드를 사용하면 동일한 시점에서 콜백을 처리할 수 있게됨
반응형
'💻 1. 웹개발_Front end > 1-7 Ajax' 카테고리의 다른 글
| [Ajax] 16. 헬퍼 함수 (0) | 2021.10.06 |
|---|---|
| [Ajax] 15. encoded_form_data (0) | 2021.10.06 |
| [Ajax] 13. Ajax Callback 지옥 (0) | 2021.10.06 |
| [Ajax] 12. XHR객체를 이용한 콜백함수 (0) | 2021.10.06 |
| [Ajax] 11. Ajax 단축 메소드 (0) | 2021.10.06 |
댓글