JavaScript 비동기 호출 프레임워크(4부 - 연쇄 호출)_javascript 기술

실제 개발에서는 일련의 동기 및 비동기 작업을 순서대로 수행하는 것이 매우 일반적입니다. 여전히 Baidu Hi 웹 버전의 예를 사용하면 먼저 연락처 목록을 비동기적으로 얻은 다음 각 연락처의 특정 정보를 비동기적으로 가져와야 합니다. 후자는 각 요청이 10개의 연락처 이름을 보낸 다음 검색합니다. 해당 특정 정보. 이는 순차적으로 실행되어야 하는 여러 비동기 요청입니다.
이를 위해 순차 비동기 연산 코드가 기존 순차 동기 연산 코드만큼 우아해 보이도록 코드 가독성을 최적화하는 새로운 연산 방법을 설계해야 합니다.
전통적인 접근 방식
대부분의 프로그래머는 다음과 같은 순차 실행 코드를 잘 이해할 수 있습니다.

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

var firstResult = firstOperation(initialArgument);
var secondResult = secondOperation(firstResult);
var finalResult = thirdOperation(secondResult ); >alert(finalResult);

먼저 실행된 함수는 나중에 실행되는 함수에 필요한 데이터를 제공합니다. 그러나 비동기 호출 프레임워크를 사용한 후에는 동일한 논리가 다음과 같아야 합니다.

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

firstAsyncOperation(initialArgument).addCallback(function(firstResult) {
secondAsyncOperation(firstResult).addCallback(function(secondResult)) {
thirdAsyncOperation(secondResult).addCallback(function(finalResult)) {
alert(finalResult);
});
});
})

체인 쓰기

code 정말 보기 흉한데, jQuery 스타일의 체인 작성으로 변환할 수 있었으면 좋겠습니다. 이를 위해 먼저 사용 사례를 구성합니다.

코드 복사 코드는 다음과 같습니다. Async.go(initialArgument)

.next(firstAsyncOperation)

.next(secondAsyncOperation)
.next(thirdAsyncOperation)
.next(function(finalResult) { Alert(finalResult); } )


이 사용 사례에서는 초기화 데이터를 전달한 후 다음 처리 함수를 차례로 전달합니다.

동기적 공존

위의 모든 사용 사례는 비동기 함수를 호출하지만 사용자가 비동기 함수의 특정 구현에 신경 쓰지 않고 이 함수를 사용할 수 있도록 동기 함수와 호환되는 것이 가장 좋습니다. 기능. 이를 위해 다음과 같은 또 다른 사용 사례를 작성합니다.

코드 복사 코드는 다음과 같습니다. Async.go(0)

.next(function(i) { Alert(i); return i 1; })

.next(function(i) {
alert(i);
var 연산 = new Async.Operation();
setTimeout(function() { Operation.yield(i 1); }, 1000)
return 연산;
.next (function(i ) { Alert(i); return i 1; })
.next(function(i) { Alert(i); return i; })


에서 위의 사용 사례에서는 1과 2 사이에 1000밀리초 간격으로 0, 1, 2, 3의 프롬프트 정보 시퀀스가 ​​표시될 것으로 예상됩니다.

비동기 특성

체인 호출은 기본적으로 비동기 호출이므로 Operation 인스턴스도 반환합니다. 이 인스턴스에는 당연히 결과, 상태 및 완료 필드도 있으며 전체 호출 체인이 완료되면 결과는 마지막 호출에서 반환된 결과와 같고 완료는 자연스럽게 true와 같습니다.
이전 사용 사례를 확장하여 다음 사용 사례 코드를 얻을 수 있습니다.


코드 복사

코드는 다음과 같습니다. : var chainOperation = Async.go(0) .next(function(i) { Alert(i); return i 1; })

.next(function(i ) {

alert (i);
var Operation = new Async.Operation();
setTimeout(function() { Operation.yield(i 1); }, 1000); ;
})
.next(function(i) { Alert(i); return i 1; })
.next(function(i) { Alert(i); return i; });
setTiemout(function () { 경고(chainOperation.result; }, 2000);


체인 호출의 반환을 저장합니다. 체인 호출이 완료되면 그 결과는 마지막 작업의 반환과 일치해야 합니다. 위의 사용 사례에서는 3입니다.
통화 타이밍
연쇄 통화 방식을 제공하지만 사용자가 반드시 이렇게 고정된 방식으로 통화할 수는 없으므로 사용자와의 호환성을 위해 다양한 가능성을 고려해야 합니다. 호출 체인에 비동기적으로 작업을 추가하려면 다음을 수행하세요.

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

var chainOperation = Async.go(0);
chainOperation.next(function(i) { Alert(i); return i 1; });
setTimeout(function() {
chainOperation. next(function(i) {
alert(i);
var Operation = new Async.Operation();
setTimeout(function() { Operation.yield(i 1); }, 2000);
반환 작업;
})
}, 1000)
setTimeout(function() {
chainOperation.next(function(i) { Alert(i); return i 1; } );
}, 2000);

이 사용 사례에서는 사용자가 1000밀리초마다 작업을 추가하고 두 번째 작업에는 2000밀리초가 걸립니다. 즉, 세 번째 작업이 추가되었을 때 두 번째 작업이 아직 반환되지 않은 것입니다. 강력한 프레임워크로서 이러한 용도와 호환되어야 합니다.
또한 사용자가 먼저 콜 체인을 구성한 다음 콜 체인을 실행하기를 원할 수도 있다는 점도 고려해야 합니다. 이때 사용자는 먼저 next 메소드를 사용하여 작업을 추가한 다음 go 메소드를 사용하여 실행합니다.

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

var chainOperation = Async
.chain (function( i) { Alert(i); return i 1; })
.next(function(i) {
alert(i);
var Operation = new Async.Operation();
setTimeout(function() { Operation.yield(i 1); }, 2000);
return 작업
})
.go(0)
setTimeout(function() {
chainOperation .next(function(i) { Alert(i); return i 1; })
}, 1000)

위 사용 사례에서는 사용자가 헤더 동기화를 추가했습니다. via chain and next 하나의 작업과 하나의 비동기 작업을 사용하고 go를 사용하여 호출 체인을 실행하고 next를 사용하여 호출 체인이 완료되기 전에 작업을 비동기식으로 추가합니다. 강력한 프레임워크는 이러한 사용 사례에서 사용자가 기대하는 대로 0, 1, 2를 표시할 수 있어야 합니다.
요약
체인 호출에 대한 수요에 부응하여 우리는 다양하고 이상한 비동기 호출 방법을 포함하여 수많은 사용 사례를 설계했습니다. 최종적으로 그러한 기능을 달성하는 방법은 무엇입니까?