🥇 Angular - Noções básicas de promessas (serviço $ q para $ http)

Coleção AngularJs Meetup South London | Este artigo

Promessas angulares

Ao usar Angular e geralmente ao usar JavaScript em um projeto de tamanho médio, você se verá lidando com muitas funções de retorno de chamada e / ou chamadas assíncronas para recuperar dados do back-end.
Para manter as coisas tranquilas, as promessas vêm em nosso socorro.

Neste protocolo, fornecerei um esqueleto básico para começar com o serviço angular $ q, para que você saiba como abordar as promessas.

Recursos mostrados neste protocolo:

- promise basic infrastructure
- basic promise usage with $http
- advanced scenario using promises with $http

Introdução de promessa

1) Criar objeto adiado

O objeto adiado controla o estado da promessa. Podemos acionar três resoluções: resolver, rejeitar e notificar. Nas etapas a seguir, veremos como isso se relaciona com a configuração da promessa.

É assim que você cria um objeto adiado:

var deferred = $q.defer();

2) Promessa de configuração

Para usar o objeto adiado, precisamos configurar os manipuladores de promessa antes. Este será o código executado para cada situação. Os cenários são: notificação de sucesso, falha e progresso. O objeto de promessa é uma propriedade do objeto adiado.

var promise = deferred.promise;

//basic version
promise.then(fnSuccess)
  .catch(fnFailure) //optional
  .finally(fnAlways) //optional

//advanced version
promise.then(fnSuccess, fnFailure, fnNotification)
  .catch(fnFailure) //optional
  .finally(fnAlways) //optional

3) Resolução diferida

Depois de criar o objeto adiado e configurar a promessa, podemos executar nosso processamento assíncrono e acionar a promessa com a resolução final.

deferred.resolve(resultObj); //triggers fnSuccess
deferred.reject(reasonObj); //triggers fnFailure
deferred.notify(progressObj); //triggers fnNotification

Uso básico de promessa de $ http

Este exemplo usa uma promessa retornada por uma chamada get $ http.

$http.get('movies.json')
.then(function(response){
   $scope.movies= response.data;
})
.catch(function(response){
  console.log(response.status);
});

êmbolo

Uso avançado de $ http promessa

Este exemplo usa promessas para lidar com chamadas $ http por trás de um serviço. Um tratamento mais complexo pode ser adicionado ao Serviço posteriormente.

app.factory("Movies", function($http, $q) {
  return {
    get: function() {
        var deferred = $q.defer();
        $http.get('movies.json')
        .then(function(response){
           deferred.resolve(response.data);
        })
        .catch(function(response){
          deferred.reject(response);
        });
        return deferred.promise;
    }
  }
})
...
app.controller("MoviesCtrl", function($scope, Movies) {
   Movies.get().then(function(data){
      $scope.movies = data;
   })
   .catch(function(response){
      console.log(response.status);
   }); 
})
...