Использование успеха / ошибки / наконец / catch с обещаниями в AngularJS

забудьте об использовании success и error метод.

оба метода устарели в angular 1.4. В принципе, причина осуждения заключается в том, что они не chainable-friendly, так сказать.

на следующем примере я попытаюсь продемонстрировать, что я имею в виду success и error не chainable-friendly. Предположим, мы вызываем API, который возвращает объект user с адрес:

пользователей объекта:

{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'
    });
};

Я думаю, что предыдущие ответы верны, но вот еще один пример (просто f.y.i, success () и error () устарели в соответствии с AngularJS Главная страница:

$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
  }
);

Я обнаружил, что "наконец" и "поймать" лучше при цепочке нескольких обещаний.

в угловом случае $http функция success() и error() будет иметь объект ответа, поэтому подпись обратного вызова будет похожа на $http(...).успех (функция (данные, статус, заголовки, конфигурация))

для then () вы, вероятно, будете иметь дело с необработанным объектом ответа. например, опубликовано в AngularJS $http API document

$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;
    });

последние .поймать.(..) не понадобится, если нет новой ошибки выбросить в предыдущей цепочке обещаний.

я делаю это, как предлагает Брэдли Брейтуэйт в своем блог:

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 ссылается на.после этого функция в нашем регуляторе т. е. все хорошо, поэтому мы можем держать наше обещание и разрешать его.

• функция отклонения ссылается на.функция catch в нашем контроллере, т. е. что-то пошло не так, поэтому мы не можем сдержать обещание и должны отклонять он.

это довольно стабильно и безопасно, и если у вас есть другие условия, чтобы отклонить обещание, вы всегда можете отфильтровать свои данные в функции успеха и вызвать deferred.reject(anotherReason) С причиной отказа.

как предложил Райан Вице в комментариях, это не может рассматриваться как полезный, если вы возиться немного с ответом, так сказать.

, потому что success и error устарели с 1.4, возможно, это лучше использовать обычные методы promise then и catch и преобразуйте ответ в этих методах и верните обещание этого преобразованного ответа.

я показываю один и тот же пример с обоими подходами и третьим промежуточным подходом:

success и error подход (success и error верните обещание HTTP-ответа, поэтому нам нужна помощь $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 чтобы высмеять поведение обещания в ваших тестах):

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;
}

любые комментарии или исправления приветствуются.