programing

.success and .error로 Angularjs에서 $q 약속을 확장하려면 어떻게 해야 합니까?

topblog 2023. 10. 15. 16:56
반응형

.success and .error로 Angularjs에서 $q 약속을 확장하려면 어떻게 해야 합니까?

제가 이 작은 코드를 Angular에 있는 커스텀 서비스에서 작성했습니다.JS.

내가 할 일은:

        var deferred = $q.defer();
        var promise = deferred.promise;

        deferred.resolve('success');
        deferred.reject('error');

        /* Handle success and error */
        promise.success = function(fn) {

            promise.then(function(response) {

                fn(response);

            });

            return promise;
        };

        promise.error = function(fn) {

            promise.then(null, function(response) {

                fn(response);

            });

            return promise;
        };

내 컨트롤러에서:

        promiseService.myPromise()
            .success(function(data){

                $scope.success= data;

            })
            .error(function(data){

                $scope.error = data;

            });

약속($q service)의 성공과 오류만 처리합니다.저는 이 코드가 다른 많은 서비스에 필요하기 때문에 커스텀으로 $q 서비스를 직접 확장하고 싶습니다.

그래서 저는 이런 것을 제 서비스에 사용하고 싶습니다.

    var deferred = myPromiseService.$qCustom.defer();
    var promise = deferred.promise;

    deferred.resolve('success');
    deferred.reject('error');

    return promise;

감 잡히는 게 없어요?Angularjs에서 필터를 확장할 수 있는 몇 가지 설명을 찾았습니다. 문제는 $q의 모든 기능을 확장하고 사용자 정의를 추가하는 좋은 방법을 찾는 것입니다.

저는 그런 것부터 시작합니다. 그것은 즉시 $q를 처리하는 일입니다.

angular.module('myApp').service('myPromiseService', function($q){

  $qCustom = $q;  

});

@jesegavin이 중단한 부분에 대한 전체적인 해결책이 있습니다.

var myApp = angular.module("myApp", []);

myApp.config(function ($provide) {

  $provide.decorator('$q', function ($delegate) {
    var defer = $delegate.defer;
    $delegate.defer = function () {
      var deferred = defer();
      deferred.promise.success = function (fn) {
        deferred.promise.then(function(response) {
          fn(response.data, response.status, response.headers);
        });
      return deferred.promise;
      };
      deferred.promise.error = function (fn) {
        deferred.promise.then(null, function(response) {
          fn(response.data, response.status, response.headers);
        });
        return deferred.promise;
      };
      return deferred;
    };
    return $delegate;
  });

});

각도별로 주입되는 것의 기본 동작을 변경하려면 다음의 방법을 사용할 수 있습니다.$provide서비스.

var myApp = angular.module("myApp", []);

myApp.config(function ($provide) {
  $provide.decorator("$q", function($delegate) {
    // The $delegate argument here refers to the $q service.

    $delegate.defer = function() {
      alert("You just tried to call defer()!");
    };

    // Now, every time angular provides an instance of $q via
    // injection, it will return your customized version of $q.

    return $delegate;
  });
});

http://plnkr.co/edit/RuZF2cGkVHwlu7NIhxEZ?p=preview 에서 위의 예를 확인하십시오.

수정에 관해서는$q성공 및 오류 함수를 추가하려면 현재로서는 잘 모르겠습니다.하지만 여기가 당신이 원하는 곳이라고 확신합니다.

IMHO, @jesegavin의 $q 장식은 완벽하지 않습니다. 성공 및 오류 기능에서 원산지 약속을 반환해서는 안 됩니다.콜백 피라미드를 평평하게 만드는 기능을 잃게 됩니다.

또한 성공 및 오류 함수 $httpPromise dose에 대한 응답 데이터를 분할할 수 없습니다.

예를들면

//can't do this..
somePromise.success(function(){
  return $http.get(...)//another primise
}).success(function(data){
  //data from $http.get..
})

여기 제 버전이 있습니다. http response를 인식하고 다음 약속을 돌려드립니다.자신의 $q가 $httpPromise와 같은 동작을 갖도록 합니다.

$provide.decorator('$q', function($delegate) {
  function httpResponseWrapper(fn) {
    return function(res) {
      if (res.hasOwnProperty('data') && res.hasOwnProperty('status') && res.hasOwnProperty('headers') && res.hasOwnProperty('config') && res.hasOwnProperty('statusText')) {
        return fn(res.data, res.status, res.headers, res.config, res.statusText);
      } else {
        return fn(res);
      }
    };
  };
  function decorator(promise) {
    promise.success = function(fn) {
      return decorator(promise.then(httpResponseWrapper(fn)));
    };
    promise.error = function(fn) {
      return decorator(promise.then(null, httpResponseWrapper(fn)));
    };
    return promise;
  };
  var defer = $delegate.defer;
  $delegate.defer = function() {
    var deferred = defer();
    decorator(deferred.promise);
    return deferred;
  };
  return $delegate;
});

언급URL : https://stackoverflow.com/questions/16797209/how-can-i-extend-q-promise-in-angularjs-with-a-success-and-error

반응형