JavaScript 비동기 호출 프레임워크(3부 - 코드 구현)_javascript 기술

클래스 구조
먼저 선반을 설정하고 사용해야 하는 모든 변수를 나열해 보겠습니다. 콜백 함수 목록을 저장하려면 배열이 필요합니다. 비동기 작업이 완료되었는지 여부를 나타내는 플래그가 필요하며 IAsyncResult를 학습하고 비동기 작업 구현자가 최종적으로 사용자 지정 실행 상태를 노출할 수 있도록 상태를 추가할 수도 있습니다. 변수를 추가하면 비동기 작업의 결과가 저장됩니다.

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

Async = {
작업: {
var callbackQueue = [];
this.result = 정의되지 않음;
this.state = "대기 중";
this.completed = false; 🎜>

addCallback 메소드

다음으로 addCallback 메소드를 구현해야 합니다. 이 메소드의 역할은 매우 간단합니다. 콜백 함수를 callbackQueue에 넣는 것입니다. 또한, 이때 Completed가 true이면 비동기 작업이 완료되었음을 의미하며 이 콜백이 즉시 호출됩니다.


코드 복사

코드는 다음과 같습니다. this.yield = function(callback) { callbackQueue.push(callback);

if (this.completed) {

this.yield(this.result)
}
return this; 🎜>
yield 메소드가 callbackQueue에 있는 콜백 함수를 하나씩 꺼내서 호출한다고 가정합니다. 따라서 done이 true인 경우 기존 결과를 사용하여 다시 Yield를 호출하면 자연스럽게 Yield가 호출됩니다. 이번에는 callbackQueue에 콜백 함수를 추가했습니다.
최종 반환은 jQuery 스타일 체인 작성을 용이하게 하기 위한 것입니다. 점 분리를 통해 여러 콜백 함수를 연속적으로 추가할 수 있습니다.

코드 복사


코드는 다음과 같습니다.

asyncOperation(argument) .addCallback(firstCallback) .addCallback(secondCallback)

Yield method

마지막으로 Yield Method를 구현해야 합니다. callbackQueue에서 콜백 함수를 하나씩 꺼낸 다음 모두 다시 호출하고 이 작업이 비동기식인지 확인해야 합니다.

코드 복사

코드는 다음과 같습니다.

this.yield = function(result) { var self = this; setTimeout(function() { self.result = result; self.state = "completed";

self.completed = true;

while (callbackQueue.length > 0) {
var callback = callbackQueue.shift();
callback(self.result)
}
},
return; 🎜>}


setTimeout을 사용하여 실제 Yield 작업이 비동기식임을 보장합니다. 그런 다음 사용자가 개체 속성에 전달한 산출 결과 및 관련 상태를 업데이트하고 마지막으로 callbackQueue를 순회하여 모든 콜백 함수를 호출합니다.

요약

이런 방식으로 간단한 JavaScript 비동기 호출 프레임워크를 만들었습니다. 전체 코드는 여기에서 볼 수 있습니다: 비동기 호출 프레임워크 Async.Operation.
이 프레임워크는 호출 스택에서 동기 작업과 비동기 작업이 공존하는 문제를 잘 해결할 수 있습니다. 모든 함수가 Async.Operation을 반환한다고 가정하면 프레임워크 사용자는 통합 모드를 사용하여 코드를 작성하고 함수 반환을 처리할 수 있습니다. 이 함수가 실제로 동기식으로 반환하는지 비동기적으로 반환하는지 신경 쓸 필요가 없습니다.
여러 비동기 함수에 대한 직렬 호출의 경우 이제 중첩된 addCallback 방식으로 작성할 수 있지만 중첩 수준 수가 증가하면 코드가 점점 더 보기 흉해집니다.

코드 복사


코드는 다음과 같습니다.

firstAsyncOperation().addCallback(function() { secondAsyncOperation() .addCallback( function() { thirdAsyncOperation().addCallback(function() { finalSyncOperation(); }) })

중첩된 양식을 jQuery 스타일의 체인 작성으로 변경할 수 있나요? 관련 토론을 놓치고 싶지 않다면 이것이 우리가 다음에 생각하고 싶은 질문입니다.