>  기사  >  웹 프론트엔드  >  JavaScript 비동기 호출 프레임워크(2부 - 사용 사례 설계)_javascript 기술

JavaScript 비동기 호출 프레임워크(2부 - 사용 사례 설계)_javascript 기술

WBOY
WBOY원래의
2016-05-16 18:48:48890검색
콜백 전달
가장 먼저 고려해야 할 것은 콜백 항목을 전달하는 방법입니다. 가장 전통적인 XHR 호출에서 콜백 함수는 비동기 함수의 마지막 매개변수로 전달됩니다.
코드 복사 코드

function asyncOperation(argument, callback)

매개변수가 꽤 많은 경우 매개변수를 JSON에 넣어서 매개변수가 매개변수는 이름이 지정된 매개변수와 같습니다. 매개변수는 매개변수 이름으로 선택적으로 전달될 수 있습니다. 전달되지 않는 매개변수는 기본값을 사용하는 것과 같습니다. 이는 프로토타입 이후 널리 사용되는 접근 방식입니다.
코드 복사 코드는 다음과 같습니다.

함수 asyncOperation(argument, options)

그러나 두 접근 방식 모두 단점이 있습니다. 즉, 동기 함수를 비동기 함수(또는 동기 및 비동기 하이브리드 함수)로 변경할 때 함수 서명은 다음과 같아야 합니다. 명시적으로 수정되었습니다. 끝에 하나 이상의 매개변수를 추가합니다.

콜 스택의 맨 아래에 비동기 함수를 도입하는 것이 너무 일반적이기 때문에 많은 상위 호출 함수 시그니처를 변경하는 데 드는 비용이 너무 높기 때문에 우리는 여전히 이를 수행하는 것을 생각합니다. 수정할 필요가 없습니다. 함수 서명을 수행하는 방법.

여기서는 비동기 작업에 대한 모든 정보를 하나의 개체에 집중시켜 함수 시그니처 수정을 방지하는 .NET Framework의 IAsyncResult 디자인을 참조합니다. 여기서는 비동기 함수의 호출 프로토타입이 다음과 같다고 가정합니다.
코드 복사 코드는 다음과 같습니다.

function asyncOperation(argument) {
작업 = new Async.Operation();
setTimeout(function() { Operation.yield("hello world"); }, 1000); 🎜>return 연산;
}

이 코드에서는 향후 콜백 함수를 전달하기 위한 Operation 개체를 반환합니다. 동시에 setTimeout을 통해 비동기 반환 결과를 시뮬레이션했는데, 구체적인 반환 방법은 항복 방법입니다.

다음으로 콜백 함수를 전달하는 메서드도 설계해야 합니다. C#처럼 = 연산자를 오버로드할 수 없으므로 함수를 사용하여 콜백 함수만 전달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.
var Operation = asyncOperation(argument);
eration.addCallback(function(result) { Alert(result); })

Do 콜백이 추가되기 전에 비동기 작업이 완료될 수 있으므로 이러한 디자인은 안전하지 않습니다. 하지만 JavaScript에서는 이렇게 작성하는 것이 안전합니다. 왜냐하면 JavaScript는 단일 스레드이고 asyncOperation의 동기 addCallback이 먼저 실행되고 asyncOperation의 비동기 항복이 나중에 실행되어야 하기 때문입니다.

호출 순서
사용자가 동기 메서드를 사용하여 Yield를 호출하는 경우 실행 순서가 Yield 구현에 따라 달라지는지 묻고 싶을 수도 있습니다. 맞습니다. 하지만 yeild는 프레임워크에서 한 번만 구현하면 동기적으로 호출되더라도 실행 순서에 영향을 주지 않습니다.

코드 복사 코드는 다음과 같습니다.
function psudoAsyncOperation(argument) {
operation = new Async.Operation()
Operation; .yield("hello world");
return 작업;
}
var 작업 = asyncOperation(argument)
operation.addCallback(function(result) { Alert(result); });

이렇게 코드를 작성하더라도 실제 Yield 로직 이전에 addCallback이 실행되도록 보장할 수 있습니다.

이벤트 후 콜백
때때로 프레임워크 사용자가 실제로 먼저 생성한 다음 addCallback을 생성하는 코드를 작성할 수도 있습니다. 이때 addCallback에 추가된 콜백 함수가 즉시 실행되도록 보장하는 것이 필요하다고 생각합니다. 사용자가 이 콜백 함수를 추가한다는 것은 비동기 작업의 결과가 있을 때 이 콜백 함수에 알리기를 기대한다는 의미이며, 이는 콜백 함수가 추가될 때 비동기 작업이 완료되는지 여부와는 아무런 관련이 없습니다. 이를 위해 다른 사용 사례를 추가합니다.

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

function psudoAsyncOperation(argument) {
작업 = new Async.Operation();
operation.yield("hello world")
return 작업; var Operation = asyncOperation(argument);
setTimeout(function() {
Operation.addCallback(function(result) { Alert(result); });
}, 1000); >

요약
이제 Async.Operation이라는 비동기 작업 개체를 설계했습니다. 키 항복 메서드와 addCallback 메서드를 구현하는 방법은 다음 기사에서 설명합니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.