Luís Fernando Guedes

Dica: Vários promises simplificados com o $q no AngularJS

O propósito dessa dica é abordar de forma superficial sobre como disparar diversas chamadas async e aguarda-lás, retornando todas conjuntamente utilizando o $q. Esse tipo de abordagem é útil quando temos uma dezena de microserviços e precisamos fazer alguma ação com o retorno deles de forma conjunta.

O AngularJS por padrão utiliza em suas Promises uma lib que se chama $q, como se trata de um padrão é bem fácil usar a mesma técnica com qualquer outra lib ou até mesmo com a API nativa. Nesse caso, utilizaremos o $q.all.

Vamos supôr que você tem um serviço implementado com Promises que consome uma API externa e que o mesmo está “injetado”, bem como o $q que nesse contexto entra como dependência do próprio controller.

Dentro desse controller, vamos usar o $q.all para gerenciar os diversos requests que serão feitos de forma assíncrona. Aqui são basicamente dois passos, o primeiro é declarar os serviços dentro de um array, e o segundo chamar esse mesmo array através do comando $q.all.

angular
    .module('seuApp')
    .controller('appCtrl', appCtrl);

appCtrl.$inject = ['$q', 'appService'];

function appCtrl($q, appService) {
    let id = 1;

    // Declare os serviços em um array
    let promises = [
        appService.getSalario(id),
        appService.getDividas(id)
    ];

    // Aguarda o retorno de todos os requests e guarda no escope
    $q.all(promises).then(val => {
        // Guarda no escopo caso queira usar os valores em outros lugares
        $scope.salario = val[0]; // getSalario
        $scope.dividas = val[1]; // getDividas
        $scope.sobrou = $scope.salario - $scope.dividas;
    });
};

Atualizado no dia 07/08/2017: Melhorei o texto e enxuguei o código, além da substituição do var por let e a adição de arrow functions.