약속 프로그래밍 모드는 또한 THELBLE이 가능하며 지연 후 실행으로 이해할 수 있습니다. 각 약속은 그때 고유 한 인터페이스를 가지고 있으며, 약속이 실패하거나 성공하면 콜백을 할 것입니다. 오랫동안 실행될 수 있으며 반드시 완료 할 필요는없는 작업 결과를 나타냅니다. 이 패턴은 장기 작업이 완료되기를 차단하고 대기하지 않지만 약속 된 결과를 나타내는 객체를 반환합니다.
현재의 많은 JavaScript 라이브러리 (예 : jQuery 및 Dojo, AngularJS)는 Promise라는이 추상화를 추가합니다. 이러한 라이브러리를 통해 개발자는 실제 프로그래밍에서 약속 모드를 사용할 수 있습니다.
아래에서는 JQuery를 예제로 사용하여 JavaScript 라이브러리가 약속 모드를 사용하여 비동기 처리를 처리하는 방법에 대해 논의합니다. 작업이 성공하거나 실패하거나 어쨌든 해당 콜백이 실행되고 특정 논리에서 가능한 상황을 처리하려고합니다.
먼저, jQuery가 일반적으로 어떻게 작동하는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var $ info = $ ( "#info");
$ .ajax ({
URL : "/echo/json/",
데이터 : {json : json.stringify ({ "name": "somevalue"})},
유형 : "Post",
성공 : 기능 (응답)
{
$ info.text (response.name);
}
});
이 예에서는 설정이 성공하면 콜백이 지정되고 이는 콜백 메소드가 좋은 것을 알 수 있습니다. 이것은 약속이 아니며 공식 jQuery 문서는 더 이상이 방법을 권장하지 않습니다 (http://api.jquery.com/jquery.ajax/#jqxhr). Ajax 호출이 완료되면 성공 기능을 실행합니다. 라이브러리에서 사용하는 비동기 작업에 따라 다양한 콜백을 사용할 수 있습니다 (즉, 작업이 성공 여부에 관계없이 다시 호출 및 응답). 약속 모드를 사용하면이 프로세스가 단순화되면 비동기 작업은 객체 호출을 반환하면됩니다. 이 약속을 사용하면 전화 한 메소드를 호출 한 다음 콜백의 기능 수를 지정할 수 있습니다.
jQuery가 약속을 어떻게 구축하는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var $ info = $ ( "#info");
$ .ajax ({
URL : "/echo/json/",
데이터 : {
JSON : json.stringify ({
"이름": "value"
})
},
유형 : "게시"
})
. 그런 다음 (함수 (응답) {
$ info.text (response.name);
});
jQuery ajax 객체는 XHR 객체를 반환하여 약속 모드를 구현하므로 당시 메소드를 호출 할 수 있습니다. 이를 수행하는 장점은 아래와 같이 통화를 체인하고 독립적 인 작업을 구현할 수 있다는 것입니다.
코드 사본은 다음과 같습니다.
var $ info = $ ( "#info");
$ .ajax ({
URL : "/echo/json/",
데이터 : {
JSON : json.stringify ({
"이름": "value"
})
},
유형 : "게시"
})
. 그런 다음 (함수 (응답) {
$ info.text (response.name);
})
. 그런데 (function () {
$ info.append ( "... more");
})
.done (function () {
$ info.append ( "... 마침내!");
});
많은 라이브러리가 약속 모드를 사용하기 시작하기 때문에 비동기 작업이 매우 쉬워집니다. 그러나 반대의 관점에서 생각한다면, 약속은 어떻게 생겼습니까? 매우 중요한 패턴 중 하나는 함수가 두 기능을 수용 할 수 있고, 하나는 성공할 때 콜백이고, 다른 하나는 실패시 콜백이라는 것입니다.
코드 사본은 다음과 같습니다.
var $ info = $ ( "#info");
$ .ajax ({
// 오류가 발생하기 위해 URL을 변경합니다
URL : "/echo/json/",
데이터 : {
JSON : json.stringify ({
"이름": "value"
})
},
유형 : "게시"
})
. 그런 다음 (함수 (응답) {
// 성공
$ info.text (response.name);
},
기능 () {
// 실패
$ info.text ( "좋은 개발자에게는 나쁜 일이 발생합니다");
})
.Always (function () {
$ info.append ( "... 마침내");
});
jQuery에서는 성공 여부에 관계없이 전화를 사용하여 전화 할 것을 지정할 것입니다.
실제로 jQuery의 공식 문서에서 권장되는 방법 인 여기에 이것을 쓸 수도 있습니다.
코드 사본은 다음과 같습니다.
var $ info = $ ( "#info");
$ .ajax ({
// 오류가 발생하기 위해 URL을 변경합니다
URL : "/echo/json/",
데이터 : {
JSON : json.stringify ({
"이름": "value"
})
},
유형 : "게시"
})
.Done (함수 (응답) {
// 성공
$ info.text (response.name);
}). 실패 (function () {
// 실패
$ info.text ( "좋은 개발자에게는 나쁜 일이 발생합니다");
})
.Always (function () {
$ info.append ( "... 마침내");
});
AngularJS가 약속 모드를 어떻게 사용하는지 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var m = angular.module ( "myapp", []);
m.factory ( "dataService", function ($ q) {
함수 _callme () {
var d = $ q.defer ();
settimeout (function () {
D.Resolve ();
//defer.reject ();
}, 100);
반환 d.promise;
}
반품 {
Callme : _callme
};
});
함수 myctrl ($ scope, dataService) {
$ scope.name = "none";
$ scope.isbusy = true;
DataService.callme ()
. 그런데 (function () {
// 성공적인
$ scope.name = "성공";
},
기능 () {
// 실패
$ scope.name = "실패";
})
. 그런데 (function () {
// 마지막 조항처럼
$ scope.isbusy = false;
});
}
JSFiddle 에서이 예를 시도하고 어떤 영향을 미칠지 확인할 수 있습니다. 비동기식을 작동시키기 위해 약속을 사용하는 것은 매우 간단한 방법이며 코드를 단순화 할 수도 있습니다. 실제로 한 돌로 두 마리의 새를 죽이는 좋은 방법입니다.
약속에 대한 더 많은 소개와 예를 보려면 공식 웹 사이트 (http://www.promisejs.org/)를 방문하십시오.