AngularJS에서 Promise와 함께 success / error / finally / catch 사용

내가 사용하고 $httpAngularJS와에, 나는 반환 약속을 사용하는 방법과 핸들 오류를 모르겠어요.

이 코드가 있습니다.

$http
    .get(url)
    .success(function(data) {
        // Handle data
    })
    .error(function(data, status) {
        // Handle HTTP error
    })
    .finally(function() {
        // Execute logic independent of success/error
    })
    .catch(function(error) {
        // Catch and handle exceptions from success/error/finally functions
    });

이것이 좋은 방법입니까, 아니면 더 쉬운 방법이 있습니까?

약속은 우리가 비동기 코드로 자신을 동 기적으로 표현할 수있게 해주는 문에 대한 추상화입니다. 일회성 작업의 실행을 나타냅니다.

또한 일반 코드와 마찬가지로 예외 처리를 제공하므로 약속에서 반환하거나 던질 수 있습니다.

동기 코드에서 원하는 것은 다음과 같습니다.

try{
  try{
      var res = $http.getSync("url");
      res = someProcessingOf(res);
  } catch (e) {
      console.log("Got an error!",e);
      throw e; // rethrow to not marked as handled
  }
  // do more stuff with res
} catch (e){
     // handle errors in processing or in error.
}

약속 된 버전은 매우 유사합니다.

$http.get("url").
then(someProcessingOf).
catch(function(e){
   console.log("got an error in initial processing",e);
   throw e; // rethrow to not marked as handled, 
            // in $q it's better to `return $q.reject(e)` here
}).then(function(res){
    // do more stuff
}).catch(function(e){
    // handle errors in processing or in error.
});

사용법 success과 error방법 은 잊어 버리십시오 .

두 방법 모두 angular 1.4에서 더 이상 사용되지 않습니다. 기본적으로 지원 중단의 이유는 말하자면 체인에 친화적 이지 않기 때문 입니다.

다음의 예를 통해, 나는에 대해 무엇을 의미하는지 설명하려고합니다 success및 error되지 인 체인 방식 친화적 인 . 주소와 함께 사용자 객체를 반환하는 API를 호출한다고 가정합니다.

사용자 개체 :

{name: 'Igor', address: 'San Francisco'}

API를 호출합니다.

$http.get('/user')
    .success(function (user) {
        return user.address;   <---  
    })                            |  // you might expect that 'obj' is equal to the
    .then(function (obj) {   ------  // address of the user, but it is NOT

        console.log(obj); // -> {name: 'Igor', address: 'San Francisco'}
    });
};

어떻게 된 거예요?

때문에 success및 error반환 원래의 약속 , 즉에 의해 반환되는 한 $http.get,의 콜백에 전달 된 개체가 then전체 인 사용자 이전에 동일한 입력 말을하는 것입니다 객체, success콜백.

두 개를 연결했다면 then덜 혼동되었을 것입니다.

$http.get('/user')
    .then(function (user) {
        return user.address;  
    })
    .then(function (obj) {  
        console.log(obj); // -> 'San Francisco'
    });
};

이전 답변이 정확하다고 생각하지만 여기에 또 다른 예가 있습니다 (Fyi, success () 및 error () 만 AngularJS Main page 에 따라 더 이상 사용되지 않습니다 .

$http
    .get('http://someendpoint/maybe/returns/JSON')
    .then(function(response) {
        return response.data;
    }).catch(function(e) {
        console.log('Error: ', e);
        throw e;
    }).finally(function() {
        console.log('This finally block');
    });

어떤 유형의 세분성을 찾고 있습니까? 일반적으로 다음을 통해 얻을 수 있습니다.

$http.get(url).then(
  //success function
  function(results) {
    //do something w/results.data
  },
  //error function
  function(err) {
    //handle error
  }
);

여러 약속을 연결할 때 "finally"와 "catch"가 더 낫다는 것을 알았습니다.

Angular $ http의 경우 success () 및 error () 함수는 응답 객체가 풀리므로 콜백 서명은 $ http (...). success (function (data, status, headers, config))와 같습니다.

then ()의 경우 원시 응답 객체를 다룰 것입니다. AngularJS $ http API 문서에 게시 된 것과 같은

$http({
        url: $scope.url,
        method: $scope.method,
        cache: $templateCache
    })
    .success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
    })
    .error(function(data, status) {
        $scope.data = data || 'Request failed';
        $scope.status = status;
    });

마지막 .catch (...)는 이전 promise 체인에서 새로운 오류가 발생하지 않는 한 필요하지 않습니다.

나는 Bradley Braithwaite가 그의 블로그 에서 제안한 것처럼 그것을합니다 .

app
    .factory('searchService', ['$q', '$http', function($q, $http) {
        var service = {};

        service.search = function search(query) {
            // We make use of Angular's $q library to create the deferred instance
            var deferred = $q.defer();

            $http
                .get('http://localhost/v1?=q' + query)
                .success(function(data) {
                    // The promise is resolved once the HTTP call is successful.
                    deferred.resolve(data);
                })
                .error(function(reason) {
                    // The promise is rejected if there is an error with the HTTP call.
                    deferred.reject(reason);
                });

            // The promise is returned to the caller
            return deferred.promise;
        };

        return service;
    }])
    .controller('SearchController', ['$scope', 'searchService', function($scope, searchService) {
        // The search service returns a promise API
        searchService
            .search($scope.query)
            .then(function(data) {
                // This is set when the promise is resolved.
                $scope.results = data;
            })
            .catch(function(reason) {
                // This is set in the event of an error.
                $scope.error = 'There has been an error: ' + reason;
            });
    }])

키 포인트:

• resolve 함수는 컨트롤러의 .then 함수에 연결됩니다. 즉 모든 것이 정상이므로 약속을 지키고 해결할 수 있습니다.

• reject 함수는 컨트롤러의 .catch 함수에 연결됩니다. 즉, 무언가 잘못되었으므로 약속을 지킬 수없고 거부해야합니다.

매우 안정적이고 안전하며 약속을 거부 할 다른 조건이있는 경우 언제든지 성공 함수에서 데이터를 필터링 deferred.reject(anotherReason)하고 거부 이유를 호출 할 수 있습니다 .

Ryan Vice가 의견에서 제안했듯이 답변을 조금만 조작하지 않으면 유용하지 않을 수 있습니다.

때문에 success그리고 error1.4부터 사용되지 않습니다 어쩌면 정규 약속 방법을 사용하는 것이 좋습니다 then및 catch그 방법 내에서 응답을 변환하고 변환 응답의 약속을 반환합니다.

두 가지 접근 방식과 세 번째 중간 접근 방식으로 동일한 예를 보여줍니다.

success및 error접근 ( success그리고 errorHTTP 응답 $q의 약속을 반환하므로 데이터 약속을 반환하는 데 도움이 필요합니다 ) :

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)
  .success(function(data,status) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(data);              
  })

  .error(function(reason,status) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.error){
      deferred.reject({text:reason.error, status:status});
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({text:'whatever', status:500});
    }
  });

  // The promise is returned to the caller
  return deferred.promise;
};

then그리고 catch접근 (이것은 던지기 때문에 테스트하기가 조금 더 어렵습니다) :

function search(query) {

  var promise=$http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    return response.data;
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      throw reason;
    }else{
      //if we don't get any answers the proxy/api will probably be down
      throw {statusText:'Call error', status:500};
    }

  });

  return promise;
}

그래도 중간 해결책이 있습니다 (이렇게하면 피할 수 throw있고 어쨌든 $q테스트에서 promise 동작을 모의하는 데 사용해야 할 것입니다 ).

function search(query) {
  // We make use of Angular's $q library to create the deferred instance
  var deferred = $q.defer();

  $http.get('http://localhost/v1?=q' + query)

  .then(function (response) {
    // The promise is resolved once the HTTP call is successful.
    deferred.resolve(response.data);
  },function(reason) {
    // The promise is rejected if there is an error with the HTTP call.
    if(reason.statusText){
      deferred.reject(reason);
    }else{
      //if we don't get any answers the proxy/api will probably be down
      deferred.reject({statusText:'Call error', status:500});
    }

  });

  // The promise is returned to the caller
  return deferred.promise;
}

어떤 종류의 의견이나 수정도 환영합니다.