함수를 구현한다고 가정하십시오 (이 기사의 후속 섹션 에서이 예제에 대한 코드를 보여 드리겠습니다). 주어진 시간을 기다려야하는 함수를 작성해야합니다 (이 경우 값은 반환되지 않음). 이것은 당신을 프로듀서로 만듭니다. 당신의 기능의 소비자는 그것을 구문 분석하거나 거부하는 것에 신경 쓰지 않습니다. 사용자는 연기가 완료, 실패 또는 진행될 때만 실행할 기능을 추가 할 수 있어야합니다. 또한 사용자가 자체적으로 연기를 구문 분석하거나 거부 할 수 없는지 확인하려고합니다. 이를 달성하려면 연기 된 자체 대신 timeout() 함수로 생성 된 지연된 약속 객체를 반환해야합니다. 이렇게하면 함수를 제외한 아무도 timeout() 또는 메소드를 호출 할 수 없도록 할 수 있습니다. timeout()
이 stackoverflow 질문에서 jQuery의 연기와 약속 대상의 차이점에 대해 더 많이 읽을 수 있습니다. resolve()
이제이 객체가 무엇인지 알았으므로 사용 가능한 방법을 살펴 보겠습니다. reject()
이연 메소드 연기 된 물체는 매우 유연하며 모든 요구를 충족시킬 수있는 방법을 제공합니다. 다음과 같이 메소드를 호출하여 생성 할 수 있습니다.
또는 $ 바로 가기를 사용하십시오 :
를 작성한 후, 지연된 물체는 여러 가지 방법을 노출시킵니다. 더 이상 사용되지 않거나 삭제 된 방법을 무시하면 다음과 같습니다
: 지연된 물체가 구문 분석되거나 거부 될 때 호출 할 핸들러를 추가하십시오. always(callbacks[, callbacks, ..., callbacks])
: 지연된 물체가 구문 분석 될 때 호출 할 핸들러를 추가하십시오.
done(callbacks[, callbacks, ..., callbacks]) : 지연된 물체를 거부 할 때 호출 할 핸들러를 추가하십시오.
: 주어진 매개 변수로 지연된 물체의 fail(callbacks[, callbacks, ..., callbacks])를 호출하십시오.
: 주어진 컨텍스트와 매개 변수를 사용하여 지연된 물체의 notify([argument, ..., argument])를 호출하십시오. progressCallbacks
: 지연된 객체가 진행 상황 알림을 생성 할 때 호출 할 핸들러를 추가합니다.
: 연기 된 약속 대상을 반환합니다. notifyWith(context[, argument, ..., argument])
: 지연된 대상을 방어하고 주어진 매개 변수로 progressCallbacks를 호출합니다.
: 지연된 물체를 방어하고 주어진 컨텍스트 및 매개 변수로 를 호출합니다. progress(callbacks[, callbacks, ..., callbacks])
: 지연된 물체를 구문 분석하고 주어진 매개 변수로 를 호출하십시오. promise([target])
: 지연된 물체를 구문 분석하고 주어진 컨텍스트 및 매개 변수로 를 호출합니다.
: 연기 된 물체의 현재 상태를 결정하십시오. reject([argument, ..., argument])
failCallbacks : 지연된 물체가 구문 분석, 거부 또는 여전히 진행 중일 때 호출 할 핸들러를 추가하십시오.
이러한 방법에 대한 설명은 jQuery 문서와 ECMAScript 사양에 사용 된 용어의 차이점을 강조 할 수있는 기회를 제공합니다. ECMAScript 사양에서 약속이 완료되거나 거부되었을 때 약속이 해결되었다고합니다. 그러나 jQuery의 문서에서 "Resolved"라는 단어는 ECMAScript 사양에서 "fulfled"라는 상태를 지칭하는 데 사용됩니다. rejectWith(context[, argument, ..., argument])
제공된 수많은 방법으로 인해이 기사에서는 모든 방법을 다룰 수 없습니다. 그러나 다음 섹션에서는 연기 및 약속 사용의 몇 가지 예를 보여 드리겠습니다. 첫 번째 예에서는 "jQuery의 콜백 함수"섹션에서 확인 된 코드 스 니펫을 무시하지만 콜백 함수 대신 이러한 객체를 사용합니다. 두 번째 예에서는 논의 된 생산자 소비자 유추를 명확히하겠습니다. failCallbacks
이연 순서를 사용하여 ajax 요청을 실행하십시오
이 섹션에서는 "jQuery의 콜백 함수"섹션에서 개발 된 코드의 가독성을 향상시키기 위해 지연된 객체와 그 방법을 사용하는 방법을 보여줍니다. 더 깊이 파고 들기 전에 필요한 방법을 이해해야합니다.
우리의 요구와 제공된 방법 목록을 바탕으로, 우리는 성공적인 상황을 관리하기 위해 또는 방법을 사용할 수 있음이 분명합니다. 많은 분들이 JavaScript의 약속 객체에 익숙해 졌기 때문에이 예에서는 done() 메소드를 사용하겠습니다. 이 두 가지 방법의 중요한 차이점은 then()가 수신 된 매개 변수 값을 다른 , then(), then() 또는 then() 호출 후에 정의 된 호출로 전달할 수 있다는 것입니다. done()
최종 결과는 다음과 같습니다
fail()
보시다시피, 우리는 전체 프로세스를 같은 수준 (들여 쓰기)의 여러 작은 단계로 나눌 수 있기 때문에 코드를 읽기가 더 쉽습니다. progress()
약속 기반 세트 타임 아웃 함수를 만듭니다
아시다시피, 는 주어진 시간 후에 콜백 함수를 실행하는 함수입니다. 두 요소 (콜백 함수 및 시간)는 매개 변수로 제공되어야합니다. 메시지를 1 초 안에 콘솔에 로그인한다고 가정하십시오.
함수를 사용하면 아래 표시된 코드로이를 달성 할 수 있습니다.
<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';
$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
var lastUpdatedRepository = repositories[0].name;
$.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
var README = null;
for (var i = 0; i < files.length; i++) {
if (files[i].name.indexOf(fileToSearch) >= 0) {
README = files[i].path;
break;
}
}
$.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
console.log('The content of the file is: ' + content);
});
});
});</code>
보시다시피, 첫 번째 매개 변수는 실행될 함수이며 두 번째 매개 변수는 대기 할 밀리 초입니다. 이 기능은 몇 년 동안 잘 작동해 왔지만 지연된 체인에 대기 시간을 도입해야한다면 어떻게해야합니까?
다음 코드에서는 jQuery가 제공 한 약속 객체를 사용하여 Promise-Based
기능을 개발하는 방법을 보여 드리겠습니다. 이를 위해, 나는 연기 된 물체의 메소드를 사용합니다.
최종 결과는 다음과 같습니다
이 목록에서 라는 함수를 정의하는
javaScript의 네이티브 setTimeout() 함수를 정의합니다. 내부 , 나는 지정된 밀리 초 후 연기 된 물체를 구문 분석하는 비동기 작업을 관리하기 위해 새로운 지연된 객체를 만듭니다. 이 경우 함수는 값의 생산자이므로 지연된 객체를 생성하고 약속 객체를 반환합니다. 이렇게함으로써, 나는 함수의 발신자 (소비자)가 연기 된 물체를 마음대로 구문 분석하거나 거부 할 수 없도록합니다. 실제로, 발신자는 및 setTimeout()와 같은 메소드 만 사용하여 실행할 함수를 추가 할 수 있습니다.
jQuery 1.x/2.x와 jQuery 3
Deferred를 사용한 첫 번째 예에서, 우리는 "readme.md"라는 이름의 파일을 찾는 코드 스 니펫을 개발했지만 그러한 파일을 찾을 수없는 경우를 고려하지 않았습니다. 이 상황은 실패로 볼 수 있습니다. 이런 일이 발생하면 통화 체인을 깨고 끝까지 직접 점프 할 수 있습니다. 이렇게하려면 메소드의 javaScript 방법과 마찬가지로 예외가 자연스럽게 던져져 잡아냅니다. <code class="language-javascript">var deferred = jQuery.Deferred();</code> 약속/A와 약속/A (예 : jQuery 3.x)를 준수하는 라이브러리의 에서는 예외가 발생하여 거부로 변환되고 실패한 콜백이 호출됩니다 (예 : 와 함께 추가). 이것은 예외를 매개 변수로 수신합니다.
jQuery 1.X 및 2.X에서, 예외는 프로그램 실행을 중지합니다. 이 버전은 버블 링에 예외를 던지고 일반적으로 fail()에 도달합니다. 이 예외를 처리 할 함수가 정의되지 않으면 예외 메시지가 표시되고 프로그램 실행이 중단됩니다.
다른 행동을 더 잘 이해하려면이 예를 확인하십시오.
jQuery 3.X 에서이 코드는 "첫 번째 실패 함수"및 "두 번째 성공 함수"를 콘솔에 씁니다. 그 이유는 앞에서 언급했듯이 사양은 제외 예외가 거부로 변환되어야하며 실패한 콜백을 예외를 사용하여 호출해야한다는 것이 명시되어 있기 때문입니다. 또한 예외가 처리되면 (이 예에서 두 번째 window.onerror로 전달 된 실패한 콜백으로 처리) 다음과 같은 성공적인 기능이 실행되어야합니다 (이 경우 성공적인 콜백은 세 번째 로 전달되었습니다). ).
jQuery 1.X 및 2.X에서는 첫 번째 함수 (오류를 던지는 함수)를 제외하고 다른 함수가 실행되지 않으면 "uncught Error : 오류 메시지"메시지 만 표시됩니다.
ecmascript 2015와의 호환성을 더욱 향상시키기 위해 JQuery 3은 지연 및 약속 객체 <code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';
$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
var lastUpdatedRepository = repositories[0].name;
$.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
var README = null;
for (var i = 0; i < files.length; i++) {
if (files[i].name.indexOf(fileToSearch) >= 0) {
README = files[i].path;
break;
}
}
$.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
console.log('The content of the file is: ' + content);
});
});
});</code>에 새로운 방법을 추가했습니다. 이것은 지연된 물체가 거부되거나 약속 객체가 거부 된 상태에있을 때 핸들러를 실행하는 방법입니다. 서명은 다음과 같습니다.
then()
이 메소드는 then()의 바로 가기 일뿐입니다.
결론
이 기사에서는 jQuery의 약속 구현을 소개했습니다. 약속은 불쾌한 트릭을 사용하여 병렬 비동기 기능과 중첩 된 콜백을 동기화 할 필요가 없습니다 ...
몇 가지 예를 보여줄뿐만 아니라 jQuery 3이 어떻게 기본 약속과의 상호 운용성을 향상시키는지를 다루었습니다. 이전 jQuery와 ECMAScript 2015의 차이점을 강조하더라도 DEFERRED는 여전히 도구 상자에서 매우 강력한 도구입니다. 전문 개발자는 프로젝트가 더 어려워지면서 자주 사용하는 것을 자주 사용합니다.
jQuery 이연된 물체 (FAQ) catch()의 FAQ
(FAQ 부분은 기사가 너무 길고 기사의 주요 주제와 거의 관련이 없기 때문에 여기서 생략됩니다. 필요한 경우 FAQ 질문을 별도로 요청할 수 있습니다.) <code class="language-javascript">var deferred = jQuery.Deferred();</code> .
