angular.js $http 서비스를 지연합니다.

angular.js $http 서비스를 지연합니다.

레거시 ASP에 AJAX 콜을 하기 위한 각진 공장이 몇 개 있습니다.다음과 같은 NET .asmx 웹 서비스:

module.factory('productService', ["$http",
function ($http) {
    return {
        getSpecialProducts: function (data) {
            return $http.post('/ajax/Products.asmx/GetSpecialProducs', data);
        }
    }
} ]);

로컬 네트워크에서 테스트 중이기 때문에 응답 시간이 너무 짧습니다.접속 불량 시뮬레이션을 위해 $http 통화를 몇 초 늦추는 현명한 방법이 있습니까?

아니면 공장 출하시 메서드에 대한 모든 콜을 $timeout으로 랩해야 합니까?

$timeout(function() {
  productService.getSpecialProducs(data).success(success).error(error);
}, $scope.MOCK_ajaxDelay);

흥미로운 질문입니다!

네가 말한 것처럼$timeout는 지연된 콜의 가장 논리적인 선택입니다.가지고 있는 대신$timeout모든 곳에서 전화를 걸면 응답 가로채기를 눌러서$http에 약속하다.$timeout의 매뉴얼에서 개념적으로 설명한 바와 같이 promise를 사용하여 설정 블록 중 하나에 등록합니다.이것은 모든 것을 의미한다.$http콜은 의 영향을 받습니다.$timeout지연되고 있어. 다음과 같은 뭔가가 있어.

$httpProvider.interceptors.push(function($timeout) {
    return {
        "response": function (response) {
            return $timeout(function() {
                return response;
            }, 2500);
        }
    };
});

접속 불량 시뮬레이션의 보너스로 무작위로 거부하거나 아무것도 하지 않을 수도 있습니다.헤헤헤헤

새로운 크롬 장치 에뮬레이터에는 네트워크 조절 기능이 있습니다.

목적:Google Chrome에서 F12 키를 눌러 개발자 도구를 엽니다.그런 다음 왼쪽 상단 모서리에서 "장치 모드 전환" 아이콘("Elements" 메뉴 왼쪽)을 클릭합니다.

@stevu의 답변에 대한 자세한 설명

responseInterceptors(1.2.20 현재)는 권장되지 않는 것 같습니다.코드 수정 후,interceptors메커니즘:

$httpProvider.interceptors.push(function($q, $timeout) {
    return {
        'response': function(response) {
            var defer = $q.defer();
            $timeout(function() {
                        defer.resolve(response);
                }, 2300);
            return defer.promise;
        }
    };
});

delfer().promise 패턴에 $q 서비스를 사용할 수 있습니다.

function someFunction(MOCK_ajaxDelay) {
   var deferred = $q.defer();
   $http.post('/ajax/Products.asmx/GetSpecialProducs', data).success(function(response) {
      $timeout(function() {deferred.resolve({ success: true, response: response })}, MOCK_ajaxDelay);  
   }).error(function() {
      $timeout(function() {deferred.resolve({ success: true, response: response } }, MOCK_ajaxDelay);  
   });
   return deferred.promise;
}

someService.someFunction(500).then(function(data) {
    if (data.success) {
      $scope.items = data.response.d;
    }
});

그러나 실제로 모의고사를 실시하는 경우에는 ngMock을 조사하는 것이 좋습니다.http://docs.angularjs.org/api/ngMock.$httpBackend

@stevuu의 답변은 맞지만 새로운 Angular에서는 구문이 변경되었습니다.이후 JS 버전.업데이트된 구문은 다음과 같습니다.

$httpProvider.interceptors.push(["$q", "$timeout", function ($q, $timeout) {
  function slower(response) {
    var deferred = $q.defer();
    $timeout(function() {
        deferred.resolve(response);
    }, 2000);
    return deferred.promise;
  }
  return {
    'response': slower
  };
}]);

이를 위해서는 $timeout과 결합된 promise api를 사용합니다.$http.post 함수는 .success 및 .error를 호출할 수 있는 약속을 반환합니다(이것들은 http 고유의 메서드입니다).이 약속은 http 요청이 완료되면 해결됩니다.독자적인 약속을 작성하는 경우는, 2 초의 지연을 지시하고 나서, http 요구가 완료했을 때에 해결할 수 있습니다.

module.factory('productService', function ($http, $q, $timeout) {

    return {
        getSpecialProducts: function (data) {
            var defer = $q.defer();
            $http.post('/ajax/Products.asmx/GetSpecialProducs', data).success(
              function(data) {
                // successful http request, resolve after two seconds
                $timeout(function() {
                    defer.resolve(data);
                }, 2000)
            }).error(function() {
                defer.reject("Http Error");
            })
            return defer.promise;
        }
    }

});

단, 주의해 주십시오.promise.then(successCallback, errorCallback)기능 - 즉, 컨트롤러/지침에서 http 헤더, 상태 및 설정에 액세스할 수 없게 됩니다.이러한 헤더, 상태 및 설정은, 다음에 건네지는 오브젝트에 명시적으로 입력하지 않는 한,defer.resolve({})

링크:

• 지연/약속 API
• Http/Promise API
• 에그헤드 비디오 해결

질문의 테스트 측면에 대응하여 Fiddler에는 지연을 시뮬레이션해야 할 때 도움이 되는 매우 유용한 기능이 있습니다.

1. Fiddler에서 Auto Responsers 탭을 클릭합니다.
2. 지연할 요청의 URL과 일치하는 정규식을 사용하여 규칙을 추가합니다.
3. "응답 대상"을 "*delay:1000"으로 설정합니다.여기서 숫자는 밀리초 단위의 지연입니다.

Fiddler의 AutoResponder 기능은 많은 http 요청을 포함하는 JS 테스트에 매우 유용합니다.특정 http 오류 코드, 블록 응답 등으로 응답하도록 설정할 수 있습니다.

만약 당신이 약속을 돌려주는 서비스를 이용한다면, $타임아웃 전에 반환을 넣어야 합니다. 왜냐하면 그것은 단지 다른 약속만을 돌려주기 때문입니다.

return dataService.loadSavedItem({
    save_id: item.save_id,
    context: item.context
}).then(function (data) {
    // timeout returns a promise
    return $timeout(function () {
        return data;
    },2000);
});

누군가 도움이 되었으면 좋겠다!

언급URL : https://stackoverflow.com/questions/18238227/delay-an-angular-js-http-service