AngularJs como fazer uma cascata de execução de funcções

Front-end JavaScript
, ,
#1

Pessoal, eu estou tentando criar uma aplicação AngularJs que consome um WS. Essa aplicação é super simples mas estou me matando com algumas functions, eu sou novo com AngularJs e com Js em geral então esta sendo um desafio, eu vou ter 3 funções como no exemplo abaixo:

function pegarAlbuns(){
//aqui farei todo o código para buscar os albums lá no ws.
//depois farei um loop “for” percorrendo a lista de albums e chamando outro método que vai pegar as fotos de cada album.
pegarPhotosDoAlbum(album_id);
//só posso continuar aqui depois do método acima ter sido totalmente executado.
}

function pegarPhotosDoAlbum(){
//código para pegar as fotos de um determinado album lá no Ws.
//depois de pegar a lista de fotos eu chamo uma função pra adicionar a url para cada photo.
addPhotoUrl();
}

function addPhotoUrl(){
//faz o que tem que fazer
}

resumindo, gostaria de uma forma eficiente de fazer o script ser executado respeitando o tempo de execução de cada função, ou seja, pegarAlbuns() inicia, chegou em pegarPhotosDoAlbum(album_id); espera essa função ser totalmente executada para somente depois continuar o script da função pegarAlbuns().

Tentei de muitas formas fazer isso mas como disse não tenho experiência com JS em todas elas não deu certo, o script continua executando mesmo sem as funções serem completamente finalizadas.

Espero ter sido claro no meu problema, qualquer informação a mais que precisarem me avisem.

Agradeço desde já.

Abraço.

#2

Geralmente em javascript esse tipo de coisa é resolvida com duas técnicas: callbacks ou promises.

Muitas funçoes em js sao executadas assincronamente (especialmente as que fazem IO, como http requests), entao você tem que avisar de alguma forma que a próxima funçao deve ser executada apenas quando a primeira tiver terminado.

Com callback geralmente é algo assim:

  function pegarAlbuns(proximaFuncao) {
    http.request("uma url", parametros, proximaFuncao)
  }

  pegarAlbuns(pegarPhotosDoAlbum);

Nesse caso, você passa para a funçao request do objeto http o que aquela funçao deve fazer quando os dados retornarem do request. Ela chamará a proximaFuncao, que no seu caso é pegarPhotosDoAlbum

O outro recurso é promises, que é de certa forma similar, mas o código é escrito de maneira diferente o que causa menos confusao pra ler (tem muitas outras diferenças, mas esse foi um dos grandes motivadores:

  http.request( "url", parametros )
  .then(pegarPhotosDoAlbum)

Veja nas bibliotecas que estiver utilizando para fazer essas chamadas, que recursos elas oferecem para fazer isso.