Synchronous requests

Question

I need to make requisitions, but the first must be a GET (getByNome) and then run the rest because they depend on it. It turns out my code is sending a Undefined because the requisitions depend on contacts which is defined in this first GET request.

By order of the Alerts, the success of the get request takes place last and other requests are made. How do I make a "synchronous request" to ensure that only after running getByNome will run the rest?

$scope.salvar = function () {
    alert("Buscando uri de agencia....");
    var contatosUri = [];
      for(var j = 0; j < $scope.contatos.length; j++){
        var nomeAgencia = $scope.contatos[j].agencia;
        agenciasAPI.getByNome(nomeAgencia).success(function (data){
            alert("Inserir no array.. " + data._links.self.href);
            contatosUri.push(data._links.self.href);
        }).catch(function (error){
          alert(JSON.stringify(error) + "\t" + error);
        });
      }
    alert("Foi inserido no array...." + contatosUri[0]);

    alert("Requests de veiculo...");
    //BUSCAR URI DE AGENCIA
    function buscarAgenciaUri(vetorDados) {
      try {
        var agenciasUri = [];
        for (var i = 0; i < $scope.listaAgencias.length; i++) {
          var json = $scope.listaAgencias[i];
          for (var k = 0; k < vetorDados.length; k++) {
            if (json.nome == vetorDados[k]) {
              agenciasUri.push(json._links.self.href);
            }
          }
        }
      } catch (err) {
        alert(err);
      }
      return agenciasUri;
    }

     var agenciasSeparadas = $scope.opcoes + '';
     agenciasSeparadas = agenciasSeparadas.split(',');
     var agenciasUri = buscarAgenciaUri(agenciasSeparadas);

     //ENVIAR DADOS DE VEICULO
     var jsonObj = {
       nome: $scope.nome,
       tipo: $scope.tipo,
       agencias: agenciasUri,
       contatos: contatosUri
     };

     alert("Enviar json de veiculo..." +JSON.stringify(jsonObj));
     veiculosAPI.postVeiculo(jsonObj)
     .success(function (data, status, headers, config) {
       $scope.nome = null;
       $scope.tipo = null;
     }).error(function (data, status, headers) {
       alert("Erro ao salvar dados do veiculo!");
       alert(data + "\t" + JSON.stringify(data));
     });

  }; 

Answer 1

Since Javascript is "single thread", it is meant to be asynchronous. Otherwise, it would crash the browser if its synchronous request took too long and would display that annoying message to the user, asking him to stop the Script and thus interrupting the execution of its application.

To perform "synchronous" mode requests you use Promises. At the angle, you can use the Service $q.

A $http angular request using Promises boils down to:

function asyncGET(url) {
    var deferred = $q.defer();
    $http.get(URL).success(function(data,status,headers,config) {
        deferred.resolve(data);
    })
    .error(function(data,status,headers,config){
        deferred.reject(status);
    });

    deferred.promise.then(function(resolve){
        return resolve;
    }, function(reject){
        alert('Erro: ' + reject);
    });
}

PS: Don’t forget to add $q to the controller services.

Answer 2

Via Angular you can make use of chained Promises:

$http.get('http://server.com/endpoint1')
.then(function(response) {
    //seus dados obtidos em http://server.com/endpoint1
    //   estarão em response.data.
    return $http.get('http://server.com/endpoint2');
})
.then(function(response) {
    //seus dados obtidos em http://server.com/endpoint2
    //   estarão em response.data.
    return $http.get('http://server.com/endpoint3');
})
.then(function(response) {
    //seus dados obtidos em http://server.com/endpoint3
    //   estarão em response.data.

    //Adicione seu tratamento final aqui.
});