※ javascript 에서 비동기처리에 사용되는 객체이다.
※ 즉, Promise 객체는 비동기적으로 동작한다.
setTimeout( function );
new XMLHttpRequest();
new Promise(...);
※ promise는 비동기처리 및 예외처리를 쉽게하기 위한 프레임워크로 생각하면 된다.
※ 두가지 방법이 존재한다. (ajax 리턴 또는 Deferred 객체를 통한 리턴)
※ ajax 도 deferred 도 Promise를 반환한다.
※ Deferred객체는 jQuery 에서 Promise를 구현한 객체이다.
$.myfunc = function() {
// deferred객체생성
const deferred = $.Deferred();
try {
deferred.resolve("Success");
} catch(e) {
deferred.reject("Failed");
}
return deferred.promise();
}
$.myfunc().done(function(data){
console.log(data);
}).fail(function(e){
console.log(e);
}).always(function(data){
console.log("Finish : "+data);
});
| method | 설명 |
|---|---|
| $.ajax() | ajax 요청, 다양한 설정 또는 메소드등을 제공한다. |
| $.get() | GET 방식요청 |
| $.post() | POST 방식요청 |
| $.getJSON() | GET 방식의 json data 요청 |
| $.getScript() | GET 방식으로 javascript를 요청해 페이지에 로딩하거나 실행시킨다. |
| $.ajaxSetup() | ajax통신에 필요한 default값을 미리 설정해 놓는다. 공통으로 필요한 설정 |
| $.param() | 배열 또는 객체를 URL 쿼리문자열에 사용할수 있도록 Query String 으로 만든다. ex) {a:b,c:d} => "a=b&c=d" |
| .load() | 지정한 요소에 서버에서 로드한 데이터를 넣는다. ex) $(destId).load(url, data); |
| .serialize() | 데이터를 쿼리문자열로 변환, 주로 form에 사용 : a=b&c=d 형태 |
| .serializeArray() | 위와 동일하다 : 문자열은 {a=b},{c=d} 형태 |
※ $(document)에 설정하며 모든 ajax 요청시 실행된다. (여러번 설정시 핸들러가 중첩되어 실행된다.)
| method | 설명 |
|---|---|
| ajaxStart() | ajax 요청전에 무조건 실행하는 콜백함수 |
| ajaxStop() | ajax 요청후에 무조건 실행하는 콜백함수 |
| ajaxSend() | ajax 요청전에 실행되는 콜백함수 |
| ajaxSuccess() | ajax 요청 성공시 콜백함수 |
| ajaxError() | ajax 요청 실패시 콜백함수 |
| ajaxComplete() | ajax 요청이 완료되면 실행되는 콜백함수 |
| 순서 | 메소드 | 설명 |
|---|---|---|
| 1 | ajaxStart | |
| 2 | ajaxSend | |
| 3 | done | fail | |
| 4 | always | |
| 5 | ajaxSuccess | ajaxError | |
| 6 | ajaxComplete | |
| 7 | ajaxStop |
| common | promise | etc. |
|---|---|---|
| beforeSend | ajaxStart | ajax 실행전에 호출됨 |
| success | done | 요청 성공시 호출 |
| error | fail | 요청 실패시 호출 |
| complete | always | 성공실패 상관없이 항상 호출됨 |
| ajaxStop | 모든 요청이 완료되는 시점에 호출됨 (always 다음) |
※ $.ajax() 는 내부적으로 Promise 를 반환한다.
※ ajaxStart(), ajaxStop() 는 한번만 호출해야지 ajax 실행시 마다 호출하면, 이벤트가 누적되어 여러번 호출된다.
$(document).ajaxStart(function(){
console.log("ajaxStart");
}).ajaxStop(function(){
console.log("ajaxStop");
});
※ 또는 매번 unbind 실행 해준다. ( 삭제 후 추가 - document or window )
$(document).unbind("ajaxStart").ajaxStart(function(){
console.log("ajaxStart");
}).unbind("ajaxStop").ajaxStop(function(){
console.log("ajaxStop");
});
※ done,fail,always 는 반복 요청할 수 있다 (callback chain)
$.ajax({
type: 'POST',
dataType: "json",
data: {key:value},
url: '/admin'
}).done(function(data){
console.log("done");
}).fail(function(e){
console.log("fail");
}).always(function(e){
console.log("always");
});
$.ajax({
type: 'POST',
dataType: "json",
data: {key:value},
url: '/admin',
beforeSend: function() {
console.log("beforeSend");
},
success: function(data){
console.log("success");
},
error: function(request, status, error){
console.log("error");
},
complete: function() {
console.log("complete");
}
});