0

Quiero saber si en realidad hay como realizar llamadas sincronas con angularjs.

El problema que tengo es el siguiente:

Tengo dos URL1 y URL2. URL1._ en esta primera url lo que hago es obtener unos ciertos valores de unas asignaturas y c/u de ellas tiene un codigo. Este codigo sera luego utilizado en mi URL2 el cual me devolvera el paralelo de la asignatura dependiendo del codigo.

Actualmente lo que he hecho es utilizar promesas en angularjs.

Para ello primero recorro el URL1 y obtengo su data[i].codigo y a su vez a este lo envio al URL2 para que me retorne su paralelo correspondiente....Pero solo me devuelve el de la primera posicion[i] y el resto no.

Quisiera que me puedan guiar con esto por favor Gracias.

Codigo:

.service('ServParalelos',function($http, $q){
  return {
      getAll: getAll
  }

  function getAll (guid_coe) {
      var defered = $q.defer();
      var promise = defered.promise;

      $http.get('http://carbono.utpl.edu.ec:8080/wscodigosqr/webresources/entidades.qrhorario/horarios_componente?guid_coe='+guid_coe)
          .success(function(data) {
              defered.resolve(data);
          })
          .error(function(err) {
              defered.reject(err)
          });

      return promise;
  }
})

Mi controller

$scope.datosComp=data; //esta variable es el data q obtengo de la URL1
    var Tamanio = $scope.datosComp.length;  
    for ( i=0; i < Tamanio; i++) { //Tamanio es del primer url o servicio
      **$scope.guid_coe** =$scope.datosComp[i].guid_coe;
      ServParalelos.getAll($scope.guid_coe).then(function(data) {
        $scope.datosA = data; //en mi sengundo servicio le paso como parametro guid_coe
      })
    }

Mi HTML

<ion-view view-title="Subjects">
  <ion-content class="fondo">
    <div class="list card">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
           <h4>
             Welcome
          </h4>
        </label>
      </div>
    </div>
    <div class="list card">
      <ion-list>
        <ion-item type="item-text-wrap" ng-repeat="i in datosComp" href="#/Gtuto/componentes/{{i.nom_coe}}">
          <h3>{{i.nom_coe}}</h3>    
          <h3 ng-repeat="i in InfoComp">{{i.paralelo}}</h3>  
        </ion-item>
      </ion-list>
    </div> 
  </ion-content>
</ion-view>
3
  • usas $http para invocar las url ? estas url son una webapi o sea devuelven json como respuesta? no entendi porque recorres url1, las url no se recorren a lo sumo los datos que esta devuelven, ademas como lo recorres, usas docs.angularjs.org/api/ng/function/angular.forEach Commented el 22 feb. 2016 a las 22:41
  • te recomiendo que revises este enlace: es.stackoverflow.com/q/2799/822 Es una pregunta similar
    – fredyfx
    Commented el 22 feb. 2016 a las 22:53
  • si uso http.get y las respuestas son en json.... Como lo menciono uso dos url xq en la primera debo obterner el codigo de c/u de las asignaturas y a ese codigo lo envio al segundo url para que me devuelva los paralelos @LeandroTuttini
    – Dimoreno
    Commented el 22 feb. 2016 a las 22:57

3 respuestas 3

3

Antes de responder tu pregunta tengo que mencionar que en ajax es muy mala idea hacer una llamada síncrona. Lo que se conoce como llamada síncrona es una llamada a ajax que bloquea la ejecución del javascript hasta que la petición no regresa con un resultado lo cual no es tu caso y de hecho esta declarado como obsoleto. Lee la especificación de XMLHttpRequest en el método open el tercer parámetro async; al ponerse en false es como se puede enviar una llamada síncrona.

En angular una llamada síncrona no es posible(todas las llamadas son asíncronas) ya que el servicio $http lo que retorna es una promesa que se resoverá o rechazará en el futuro con un valor determinado (los datos enviados por el servidor o el error).

He notado ademas que estas usando esta notación:

function getAll (guid_coe) {
  var defered = $q.defer();
  var promise = defered.promise;

  $http.get('url')
      .success(function(data) {
          defered.resolve(data);
      })
      .error(function(err) {
          defered.reject(err)
      });

  return promise;
}

Lo cual se conoce como el antipatrón de las promesas. En su lugar debes usar algo como esto:

function getAll (guid_coe) {
  return $http.get('url');
}

No sólo es mas simple sino que estás usando el patrón correcto. Además los métodos success y error son obsoletos, en su lugar debes usar then con esta forma:

promesa.then(function() {
    // success
}, function() {
    // error
});

Habiendo mencionado en que prácticas no debes incurrir volvamos a tu ejemplo. Así es como debería quedar tu servicio.

.service('ServParalelos',function($http, $q){
  return {
      getAll: getAll,
      getOne: getOne
  }

  function getAll () {
      return $http.get('url1');
  }

  function getOne(guid_coe) {
      return $http.get('url2' + guid_coe);
  }
})

Usando el método $q.all([/*arreglo u objeto con promesas*/]) puedes hacer algo cuando todas las promesas se resuelvan, por ejemplo para mostrar todos los resultados a la misma vez, el resultado obtenido en el then tambien es un arreglo con el mismo orden en el que hiciste las peticiones

En tu caso es un arreglo de peticiones por lo que te recomiendo que los resultados en tu $scope se deber guardar precisamente en un arreglo. Si haces algo como esto:

// Tus resultados se mostrarán todos de un golpe
ServParalelos.getAll().then(function(response) {
    var promesas = [];
    $scope.datosComp=response.data;
    var Tamanio = $scope.datosComp.length;  
    for (var i=0; i < Tamanio; i++) {
        promesas.push(ServParalelos.getOne($scope.datosComp[i].guid_coe));
    }

    return $q.all(promesas);
}).then(function(resultados) {
    // en resultados esta un arreglo con todos los datos de tus llamadas a url2
    // se lo asignas al scope luego de extraerlos
    for (var i=0; i < Tamanio; i++) {
       $scope.datosComp[i].datosA = resultados[i].data;
    }
}, function(err) {
    // Hacer algo con el error
});

También puedes hacer algo como esto:

ServParalelos.getAll().then(function(response) {
    // Tus resultados se muestran a medida que van llegando
    $scope.resultados = [];
    $scope.datosComp=response.data;
    var Tamanio = $scope.datosComp.length;  

    function successCb(resp) {
        $scope.resultados.push(resp.data)
    }

    function errorCb(error) {
        // hacer algo con el error
    }

    for ( i=0; i < Tamanio; i++) {       
        ServParalelos.getOne($scope.datosComp[i].guid_coe).then(successCb, errorCb);      
    }
}, function(err) {
    // Hacer algo con el error
});

Con la particularidad de que tus datos pueden no mostrarse en el mismo orden ya que es imposible predecir el orden de las llamadas asíncronas por lo que debes escribir el código de la siguiente forma:

ServParalelos.getAll().then(function(response) {
    // Tus resultados se muestran a medida que van llegando
    $scope.datosComp=response.data;
    var Tamanio = $scope.datosComp.length;  

    function asignaAsignatura(indice) {
        function successCb(resp) {
            $scope.datosComp[indice].datosA = resp.data;
        }

        function errorCb(error) {
            // hacer algo con el error
        }

        ServParalelos.getOne($scope.datosComp[indice].guid_coe).then(successCb, errorCb); 
    }


    for (var i=0; i < Tamanio; i++) {       
        asignaAsignatura(i);   
    }
}, function(err) {
   // Hacer algo con el error
});
10
  • Pero usted cree q la asignatura del url1 se pueda mostrar con su respectivo paralelo del url2?? Le agradezco de antemano por su respuesta
    – Dimoreno
    Commented el 23 feb. 2016 a las 19:18
  • Si mira al final se reduce a como lo almacenas en tu scope para que esté disponible en tu vista, esto no tiene ninguna relacion con la forma en la que haces tus peticiones. Si las asignaturas que pides en la url1 son un arreglo puedes usar el método map y crear un nuevo arreglo de objetos que representen la asignatura; luego en una propiedad que quieras le asignas un arreglo con el paralelo y solo te queda iterar con ng-repeat para mostrar los datos de tus asignaturas.
    – devconcept
    Commented el 23 feb. 2016 a las 20:35
  • Al parecer no me sale pero le agradezco su tiempo @devconcept
    – Dimoreno
    Commented el 23 feb. 2016 a las 21:47
  • @DiegoIsraelMoreno Ya actualicé mi respuesta con un ejemplo que puede funcionarte. Tenía un pequeño bug. Lo siento por el inconveniente. No se bien como estás estructurando tus datos en la vista pero esto debería servirte.
    – devconcept
    Commented el 23 feb. 2016 a las 21:49
  • Listo voy a tratar a ver como sale.....mmmm Para entender mejor mi problema no desea q le pase mis 2 url??
    – Dimoreno
    Commented el 23 feb. 2016 a las 22:20
0

basado en lo que dices siento que esta es una respuesta: http://andyshora.com/promises-angularjs-explained-as-cartoon.html

El controlador:

    // function somewhere in father-controller.js
    var makePromiseWithSon = function() {
        // This service's function returns a promise, but we'll deal with that shortly
        SonService.getWeather()
            // then() called when son gets back
            .then(function(data) {
                // promise fulfilled
                if (data.forecast==='good') {
                    prepareFishingTrip();
                } else {
                    prepareSundayRoastDinner();
                }
            }, function(error) {
                // promise rejected, could log the error with: console.log('error', error);
                prepareSundayRoastDinner();
            });
    };

El servicio:

 app.factory('SonService', function ($http, $q) {
    return {
        getWeather: function() {
            // the $http API is based on the deferred/promise APIs exposed by the $q service
            // so it returns a promise for us by default
            return $http.get('http://fishing-weather-api.com/sunday/afternoon')
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }

                }, function(response) {
                    // something went wrong
                    return $q.reject(response.data);
                });
        }
    };
});
8
  • ya te comparto mi codigo para q mas o menos me entiendas
    – Dimoreno
    Commented el 22 feb. 2016 a las 23:05
  • Vamos viendo, mientras tanto podrías compartir un valor de guid_coe para detallar mejor?
    – fredyfx
    Commented el 22 feb. 2016 a las 23:10
  • 16ae1bc4-6e77-00a6-e053-ac10363300a6 este es uno..... La url1 digamos me retorna un json con tres datos y de cada uno envio su guid_coe cada uno de estos es diferentes es mas o menos como un id
    – Dimoreno
    Commented el 22 feb. 2016 a las 23:16
  • por fin entendí a que te refieres con "Paralelos". me hare un espacio de tiempo para darte una mano, espero poder publicarte algo en las siguientes horas. Por cierto, éxitos con el ionic framework!
    – fredyfx
    Commented el 22 feb. 2016 a las 23:19
  • Muchisisisiimas graciasss lo seguire en twitter para poderle pasar la otra url de ser necesario.....
    – Dimoreno
    Commented el 22 feb. 2016 a las 23:24
0

Recomendaria que el servicio lo imlementes de esta forma .service('ServParalelos',function($http, $q){ return { getAll: getAll, getByGuidCoe: getByGuidCoe }

  function getAll () {
      var defered = $q.defer();

      var url = 'http://carbono.utpl.edu.ec:8080/wscodigosqr/webresources/entidades.qrhorario/horarios_componente';

      $http.get(url)
          .success(function(data) {
              defered.resolve(data);
          })
          .error(function(err) {
              defered.reject(err)
          });

      return defered.promise;
  };

 function getByGuidCoe (guid_coe) {
      var defered = $q.defer();

      var url = 'http://carbono.utpl.edu.ec:8080/wscodigosqr/webresources/entidades.qrhorario/horarios_componente?guid_coe=' + guid_coe;

      $http.get(url)
          .success(function(data) {
              defered.resolve(data);
          })
          .error(function(err) {
              defered.reject(err)
          });

      return defered.promise;
  };

})

Defines dos metodos uno getAll() y otro getByGuid() entonces si separas la funcionalidad, pasando o no el filtro a la url.

Al invocarlo desde el controller usarias

$scope.datosComp = [];
$scope.datosA = [];

ServParalelos.getAll().then(function(data) {

    $scope.datosComp=data; 
    angular.forEach(data, function(value, key) {

          ServParalelos.getByGuidCoe(value.guid_coe).then(function(data) {
            $scope.datosA.push(data); 
          })

        });

});

Cuando invocas al segundo metodo debes ir agregando los valores que recibes en un array ya que obtendras mas de uno, es por eso que defino el scope y uso el push()

3
  • datosComp tiene ortra url no es la misma que esta.....Probare a ver q tal me va Gracias
    – Dimoreno
    Commented el 22 feb. 2016 a las 23:22
  • pero no has puesto a que servicio invocas con la primer url, se entendia que era el mismo pasandole o no el parametro Commented el 22 feb. 2016 a las 23:32
  • tiene razon perdon ahora le comparto carbono.utpl.edu.ec:8080/wscodigosqr/webresources/…
    – Dimoreno
    Commented el 23 feb. 2016 a las 1:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.