JavaScript 비동기 콜백_javascript 기술의 약속 모드 캡슐화 예

웹페이지의 상호작용은 점점 더 복잡해지고 있으며 JavaScript에는 점점 더 많은 비동기 작업이 포함됩니다. 예를 들어, 일반적인 Ajax 요청에는 요청이 완료될 때 응답 작업이 필요합니다. 요청 프로세스 중에 사용자는 페이지를 차단하지 않고 다른 작업을 수행할 수도 있습니다. 친숙한. 하지만 개발자 입장에서는 이런 종류의 작업을 대량으로 처리하는 것이 매우 비우호적입니다. 비동기식 요청으로 완료된 작업은 콜백 함수에 미리 정의되어 있어야 하며, 요청이 완료되면 이 함수를 호출해야 합니다. 이러한 비선형 비동기 프로그래밍 방식은 개발자를 매우 불편하게 만들 뿐만 아니라 많은 불편을 초래하고 코드의 결합성과 복잡성을 증가시키며 코드 구성도 매우 우아하지 않아 코드의 효율성을 크게 떨어뜨립니다. . 유지보수성. 상황은 더 복잡합니다. 작업이 수행되기 전에 여러 비동기 Ajax 요청이 완료될 때까지 기다려야 하는 경우 여러 수준을 중첩해야 하는 경우 축복만 요청할 수 있습니다.
다음과 같은 일반적인 비동기 함수를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

var showMsg = function(){
setTimeout( function(){
경보( 'hello' );
}, 5000 );
};

함수에 콜백을 추가하려는 경우 일반적으로 이렇게 합니다.

코드 복사 코드는 다음과 같습니다.

var showMsg = function( callback ){
setTimeout (function(){
Alert( 'hello' );
// 여기에 콜백 추가
callback();
}, 5000 );
};

easy.js의 Promise를 사용하는 경우 원래 함수를 Promise 인스턴스로 캡슐화해야 한다면 콜백을 추가하는 방법이 훨씬 더 우아해집니다.

코드 복사 코드는 다음과 같습니다.

var showMsg = function(){
// 프로미스 인스턴스 생성
var promise = new E.Promise();

setTimeout(function(){
Alert( 'hello' );

// 약속 상태 변경
                                                                                                                           누구'누구'누구'누구'누구'누구'누구'누구' 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 누구 50000000000 >
일반 함수를 Promise 인스턴스로 캡슐화하는 세 가지 주요 단계가 있습니다. 첫 번째 단계는 함수 내부에 Promise 인스턴스를 구성하는 것입니다. 두 번째 단계는 배포 기능이 실행된 후 Promise 상태를 완료로 변경하는 것입니다. 세 번째 단계는 이 Promise 인스턴스를 반환하는 것입니다. 각 Promise 인스턴스에는 보류(완료되지 않음), 해결(완료, 성공) 및 거부됨(거부, 실패)의 세 가지 상태가 있습니다. 콜백을 추가하는 방법을 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

showMsg().then(function( str ){ // 여기에 콜백이 추가됩니다 callback( str );});

이는 콜백 함수를 원래 비동기 함수와 완전히 분리하여 코드 구성 관점에서 훨씬 더 우아합니다. 해결은 then 메소드를 사용하여 추가된 콜백에 데이터를 전달하는 데 쉽게 사용할 수 있는 매개변수를 허용합니다.
Ajax 요청의 경우 easy.js는 ajax 메서드를 promise 개체로 직접 캡슐화하고 then 메서드를 직접 추가하여 콜백할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

E.ajax({ url : 'test1 .php', type : 'GET'}).then(function(){ // 요청 성공을 위한 콜백 추가

}, function(){

/ / 요청 실패에 대한 콜백 추가
});

then 메소드는 2개의 함수를 매개변수로 받아들이는데, 첫 번째 함수는 완료된 콜백이고 두 번째 함수는 실패한 콜백입니다.
위에 언급된 Ajax 요청이 여러 개 있으면 어떻게 되나요? 그런 다음 when 메소드를 사용해야 합니다. 이 메소드는 여러 Promise 인스턴스를 매개변수로 허용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

varrequest = E.when(E. ajax({
url : 'test1.php',
type : 'GET'
}), E.ajax({
url : 'test2.php',
type : ' GET'
}));

requests.then(function( arg1, arg2 ){
console.log( 'success：' arg1[0] arg2[0] );
}, function( arg1, arg2 ){
console.log( '실패：' arg1 arg2 );
});

When 메소드는 여러 개의 Promise 인스턴스를 배열에 저장하고, 완료된 콜백을 실행하기 전에 배열의 모든 Promise 인스턴스가 완료될 때까지 기다리는 것입니다. 한 인스턴스가 거부되면 즉시 거부된 콜백을 실행합니다.

Promise 패턴은 CommonJS의 사양 중 하나입니다. 많은 주류 JavaScript 라이브러리에는 이러한 기능을 구현하기 위해 연기된 jQuery 및 Dojo와 같은 해당 구현이 있습니다. 여기서 나는 여전히 jQuery의 Deferred에 대해 불평하고 싶습니다. 내부 사용에 관계없이 이 모듈은 사용자의 사용률이 가장 낮은 모듈이어야 합니다. 이는 더 복잡한 사용과 특정 관계가 있습니다.