웹 페이지의 상호 작용은 점점 더 복잡해지고 있으며 JavaScript도 점점 더 많은 비동기 작업이되고 있습니다. 예를 들어, 일반적인 AJAX 요청은 요청이 완료 될 때 작업에 대한 응답이 필요합니다. 요청은 일반적으로 비동기식입니다. 요청 프로세스 중에 사용자는 페이지를 차단하지 않고 다른 작업을 수행 할 수 있습니다. 이 비동기 상호 작용 효과는 사용자에게 매우 친숙합니다. 그러나 개발자에게는 이러한 종류의 운영을 대량으로 다루는 것은 매우 비우호적입니다. 비동기 요청에 의해 완료된 작업은 콜백 함수에서 사전 정의되어야하며 요청이 완료된 후에이 기능을 호출해야합니다. 이 비선형 비동기 프로그래밍 방법은 개발자를 불편하게 만들고, 많은 불편 함을 가져와 코드의 커플 링과 복잡성을 높이고, 코드의 구성은 매우 우연히 발생하여 코드의 유지 관리 가능성을 크게 줄일 것입니다. 상황이 더 복잡합니다. 작업이 수행되기 전에 여러 비동기식 AJAX 요청이 완료 될 때까지 작업이 기다려야하는 경우 콜백 기능이 중첩됩니다. 여러 층을 중첩 해야하는 경우 축복 만 요구할 수 있습니다.
다음과 같은 일반적인 비동기 기능을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
var showmsg = function () {
settimeout (function () {
경고 ( 'Hello');
}, 5000);
};
기능에 콜백을 추가하려는 경우 일반적으로 수행됩니다.
코드 사본은 다음과 같습니다.
var showmsg = function (콜백) {
settimeout (function () {
경고 ( 'Hello');
// 여기에 콜백을 추가합니다
콜백 ();
}, 5000);
};
easy.js promise를 사용하면 콜백을 추가하는 방법은 원래 기능을 약속 인스턴스로 캡슐화 해야하는 한 훨씬 더 우아합니다.
코드 사본은 다음과 같습니다.
var showmsg = function () {
// 약속 인스턴스 구성
var promise = new e.promise ();
settimeout (function () {
경고 ( 'Hello');
// 약속 상태를 변경합니다
Promise.resolve ( 'done');
}, 5000);
// 약속 인스턴스로 돌아갑니다
반환 약속;
};
일반 기능을 약속 인스턴스로 캡슐화하는 3 가지 주요 단계가 있습니다. 첫 번째 단계는 함수 내부에서 약속 인스턴스를 구성하는 것입니다. 두 번째 단계는 배포 함수가 실행 된 후 완료 될 약속의 상태를 변경하는 것입니다. 세 번째 단계는이 약속 사례를 반환하는 것입니다. 각 약속 인스턴스에는 3 개의 상태, 즉 보류 중 (완료되지 않음), 해결 (완료, 성공) 및 거부 (거부, 실패)가 있습니다. 콜백을 추가하는 방법을 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
showmsg (). 그런 다음 (함수 (str) {
// 콜백이 여기에 추가됩니다
콜백 (str);
});
이것은 콜백 함수를 원래 비동기 기능과 완전히 분리하며 코드 구성의 관점에서 훨씬 더 우아합니다. Resolve는 당시 메소드를 사용하여 추가 된 콜백으로 쉽게 데이터를 전송할 수있는 매개 변수를 허용합니다.
ajax 요청의 경우 easy.js는 ajax 메소드를 약속 객체로 직접 캡슐화하고 그 당시 메소드를 직접 추가 할 수 있습니다.
코드 사본은 다음과 같습니다.
e.ajax ({
URL : 'test1.php',
유형 : 'Get'
})
. 그런데 (function () {
// 성공적인 요청으로 콜백을 추가합니다
}, 기능(){
// 요청에 실패한 콜백을 추가합니다
});
당시 메소드는 2 기능을 매개 변수로 받아들입니다. 첫 번째 함수는 완성 된 콜백이고 두 번째 기능은 실패한 콜백입니다.
위에서 언급 한 여러 Ajax 요청이 있으면 어떻게해야합니까? 그런 다음 When Method를 사용해야합니다. 이 방법은 여러 약속 인스턴스를 매개 변수로 받아 들일 수 있습니다.
코드 사본은 다음과 같습니다.
var requests = e.
URL : 'test1.php',
유형 : 'Get'
}), e.ajax ({
URL : 'test2.php',
유형 : 'Get'
});
요청.
Console.log ( '성공 :' + arg1 [0] + arg2 [0]);
}, function (arg1, arg2) {
Console.log ( '실패 :' + arg1 + arg2);
});
방법은 여러 약속 인스턴스를 배열에 저장하고 완성 된 콜백을 실행하기 전에 배열의 모든 약속 인스턴스가 완료 될 때까지 기다리는 것입니다. 인스턴스가 거부되면 거부 된 콜백이 즉시 실행됩니다.
약속 패턴은 CommonJS의 사양 중 하나입니다. 많은 주류 JavaScript 라이브러리에는 JQuery 및 Dojo와 같은 해당 구현이 있으며 이러한 기능을 구현하기 위해 연기되었습니다. 여기서 나는 여전히 jQuery의 연기에 대해 불평하고 싶습니다. 내부 사용을 제외하고, 이것은 가장 복잡한 사용법과 특정 관계를 갖는 사용자 사용률이 가장 낮은 모듈이어야합니다.