JavaScript 비동기 호출 프레임워크(6부 - 예제 및 패턴)_javascript 기술

Ajax 캡슐화
Async.Operation을 설계하는 원래 목적은 Ajax 호출이 콜백 매개변수를 전달해야 하는 문제를 해결하는 것입니다. 이러한 이유로 먼저 Ajax 요청을 Async.Operation에 캡슐화합니다. 물론 여기서는 jQuery를 사용하고 있습니다. 어떤 기본 라이브러리를 사용하든 Async.Operation을 사용할 때 이 간단한 캡슐화를 수행할 수 있습니다.

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

var Ajax = {};
Ajax.get = function(url, data) {
var Operation = new Async.Operation()
$.get(url, data, function(result) { Operation.yield(result); }, " json");
반환 작업;
};

Ajax.post = function(url, data) {
var 작업 = new Async.Operation(); >$.post(url, data, function(result) { Operation.yield(result); }, "json")
반환 작업
}; 서버사이드 API에서는 GET, POST만 필요하고 데이터는 모두 JSON이므로 jQuery에서 제공하는 다른 Ajax 옵션을 직접 차단하고 데이터 타입을 JSON으로 설정했습니다. 프로젝트에서 유사한 방법을 사용하여 Async.Operation만 반환하는 여러 메서드로 Ajax를 캡슐화하고 jQuery가 제공하는 모든 옵션을 Ajax 계층에 캡슐화하여 이러한 옵션을 더 이상 상위 계층에 노출하지 않을 수도 있습니다.


Ajax 호출

Ajax를 캡슐화한 후에는 비즈니스 로직 작성에 집중할 수 있습니다.

Friend 개체가 있고 해당 개체의 get 메서드는 단일 친구 개체를 반환하는 데 사용되고 getAll 메서드는 모든 친구 개체를 반환하는 데 사용된다고 가정합니다. 이에 대응하는 두 개의 서버측 API는 친구 인터페이스가 단일 친구 JSON을 반환하고, 친구 목록 인터페이스는 모든 친구 이름으로 구성된 JSON을 반환합니다.
먼저 좀 더 기본적인 get 메소드를 작성하는 방법을 살펴보겠습니다.



코드 복사

코드는 다음과 같습니다. 다음: function get(name) { return Ajax.get("/friend", "name=" encodeURIComponent(name)) }

그게 간단해요? 예, 서버 측 API에서 반환된 JSON 구조가 정확히 원하는 친구 개체 구조라면 가능합니다. JSON 구조와 친구 개체 구조가 이질적인 경우 JSON을 개체에 매핑하기 위한 일부 코드를 추가해야 할 수도 있습니다.

코드 복사

코드는 다음과 같습니다. function get(name) { var Operation = new Async.Operation() Ajax.get("/friend", "name=" encodeURIComponent(name ))

.addCallback(function(json) {

eration.yield(createFriendFromJson(json));
})
return 작업;



Ajax Queue

다음으로 작성해야 할 것은 getAll 메소드입니다. friendlist 인터페이스는 친구 이름 목록만 반환하기 때문에 이 목록을 얻은 후 특정 친구 개체를 얻으려면 get 메서드를 하나씩 호출해야 합니다. 여러 친구 인터페이스를 동시에 호출하면 서버의 공격 방지 전략이 실행되어 일정 시간 동안 암실에 갇힐 수 있다는 점을 고려하여 친구 인터페이스에 대한 호출을 대기열에 추가해야 합니다.

코드 복사

코드는 다음과 같습니다. function getAll(){ var Operation = new Async.Operation(); var friends = []; var chain = Async.chain()

Ajax.get("/friendlist", "")

.addCallback (function( json) {
for (var i = 0; i < json.length; i ) {
chain.next(function() {
return get(json.shift())
.addCallback(function(friend); });
})
}
chain
.next(function() { Operation.yield(friends) ; })
.go();
})
반환 작업
}


여기서는 friendlist 인터페이스에서 반환된 JSON이 배열이라고 가정합니다. 이 배열을 얻은 후 각 호출의 논리는 동일합니다. 즉, 첫 번째 친구를 제거합니다. Array.name인 경우 get 메소드를 사용하여 해당 친구 개체를 얻은 다음 친구 개체를 다른 배열에 넣습니다. 호출 대기열이 끝나면 친구 객체를 보유하는 배열을 반환하기 위해 또 다른 호출을 추가합니다.

이 예에서는 이전 함수의 결과를 다음 함수에 전달하기 위해 호출 대기열 기능을 사용하지 않았지만 호출 대기열의 사용을 보여주기에는 충분합니다. - 여러 하위 레이어 허용 Ajax 요청을 수행하기 위해 비동기 작업은 고정된 순서로 차단 방식으로 실행됩니다.

기본 비동기 함수가 Async.Operation을 반환하므로 바로 다음 메서드에 전달할 수도 있고, 익명 함수로 래핑하여 다음 메서드에 전달할 수도 있으며, 내부에는 반환이 하나만 필요합니다. 익명 함수.

지연 기능
위의 예에서는 서버의 공격 방지 전략이 실행되는 것을 방지하기 위해 대기열을 사용하지만 때로는 이것만으로는 충분하지 않습니다. 예를 들어 서버는 두 요청 사이에 최소 500밀리초가 필요합니다. 그렇지 않으면 공격으로 간주되며 이 간격을 대기열에 삽입합니다.

원래 next 메소드에서 호출한 익명 함수에 setTimeout을 수동으로 추가하는 것도 하나의 방법인데, 이런 문제를 해결하기 위해 보조 함수를 작성해 보는 것은 어떨까요? 도우미 메서드를 작성하고 이를 Async.Operation과 원활하게 통합해 보겠습니다.

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

Async.wait = function(delay, context ) {
var 연산 = new Async.Operation();
setTimeout(function() { Operation.yield(context); }, 지연)
반환 연산;
Async.Operation.prototype.wait = function(delay, context) {
this.next(function(context) { return Async.wait(delay, context); });

이 도우미 메서드를 사용하면 위의 getAll 메서드에서 각 Ajax 요청 사이에 500밀리초 간격을 쉽게 구현할 수 있습니다. for 루프 내에서 대기하도록 호출을 추가하기만 하면 됩니다.

코드 복사

코드는 다음과 같습니다. for (var i = 0; i < ; json.length; i ) { 체인

.wait(500)

.next(function() {
return get(json.shift())
.addCallback( friend) { friends.push(friend); });
});
}



요약

Async. Operation을 사용하는 일반적인 방법과 필요한 경우 해당 기능을 확장하는 방법입니다. Async.Operation이 모든 사람이 Ajax 애플리케이션의 코드 가독성을 향상시키는 데 효과적으로 도움이 되기를 바랍니다.