1

Estoy obteniendo los datos de una api de terceros donde me indican la manera de trabajar con jQuery. Necesito hacer esta petición tantas veces como páginas de datos me devuelve la aplicación.
El problema es que al hacer la petición ajax dentro de un for, se envían todas las peticiones sin obtener respuesta. ¿Cómo hago para enviar una segunda petición una vez obtenida la respuesta de la primera?

for (var i = 1; i <= 514; i++){
 
  var settings = {
    "url": "https://www.multivende.com/api/product-stocks/stores-and-warehouses/{{store_id}}/product-versions/null/p/{{i}}",
    "method": "GET",
    "timeout": 0,
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer <<TOKEN>>"
    },
  };

  $.ajax(settings).done(function (response) {
    console.log(response);
  });

2
  • SOlo por curiosidad porque tantas veces? porque no es una solo llamada si ya tienes los datos que vas a consultar? el 28 may. 2019 a las 19:56
  • @Igmer Rodriguez porque la api solo me trae 50 registros por página, el número de página debo pasarlo en la url de la petición y en total son mas de 26mil registros
    – Virginia
    el 28 may. 2019 a las 20:02

3 respuestas 3

0

No esta bien lo que estas haciendo.

Todo browser puede enviar 6~8 request en paralelo, quedando los otros 506 q estas enviando en wait, hasta que vuelve uno. Cuando vuelve uno se habilita el envío el siguiente. Esta restricción no la ves desde el código, el código va a iterar todas las veces pero si hubris la consola vas a ver que todos los request se quedan esperando por salir.

Por otro lado, al usar $.ajax(settings).done estas agregando 514 veces la misma funcion, pero no necesariamente quedan "linkeados" a cada request como quieres hacerlo de la forma en que lo haces

No tiene sentido traer 26000 registros al front de una, una tabla con tantos registros no es viable. Trae los primeros 50 y luego pon un boton para cargar los siguientes 50 y asi. El tiempo de carga va a mejorar y el usuario no se va a quedar esperando la respuesta por tanto tiempo

Luego la llamada al ajax, la debes hacer como lo indica Igmer, pero sin el bucle.

function traerDato()
  {
    $.ajax({          
      url:'<<URL>>>',
      method: 'GET',
      timeout:3000,
      headers:{
        contentType: 'application/json; charset=utf-8',
        Authorization: 'Bearer <<TOKEN>>'
      },
      async: true,
      dataType: 'jsonp',
      success:function(data){
        console.log(data)
      }
    });
  }

Por otro lado, trata de no poner los tokens de authentication/Authorization en un foro

2
  • Gracias por tu respuesta. Me faltó explicar que la idea de hacer ésto, es que obtener de manera automática el stock que está publicado en la app de terceros, comparar lo que hay en stock de tienda propietario y actualizar esto en la app. Fue lo que pidieron, independientemente de que sea lo más eficaz o mas conveniente.
    – Virginia
    el 29 may. 2019 a las 15:09
  • Es entendible. Por lo gral ese tipo de cosas se realiza en backend y no desde el frontend. Puede ser on demand llamando a un servicio que internamente calcula todo lo que necesitas, pero si ese calculo solo cambia 1 vez por día o tal vez 2 o 3 veces en momentos particulares del día, lo mejor es tener un cron que se ejecute a cierta hora y te deje el calculo armado para que la llamada ondemand no tarde nada. Estas haciendo un montón de request y eso tarda y mas si hay muchos usuarios y/o se hace muchas veces en un dia. Si el servicio es de un 3ro puede que te limiten la cantidad de requests. el 30 may. 2019 a las 13:08
0

Te recuerdo que AJAX es una tecnología que trabaja de forma asíncrona, es decir, al momento que envías la petición, Javascript continuará con el código escrito hasta que el servidor responda, es por eso que tienes todas las peticiones de un solo tajo, quizá te responda primero la petición 500 antes que la 10, depende de la latencia y condiciones a donde estes apuntando.

Ahora, por lo que quieres te recomiendo entonces que uses la propiedad async = false. Esto hará que no se envíe otra petición sin obtener la respuesta de la anterior. De igual forma en lugar de hacer un for te recomendaría utilizar un arreglo y ejecutar un forEach En temas de performance es mucho más eficiente.

Te dejo un ejemplo documentado para que te guíes, este no funcionará ya que AJAX está limitado en los snippets.

$( ()=> {

// Crea un arreglo de rutas
const urls = ['url1', 'url2', 'url3', 'url4', 'url5'];

// Barre el arreglo
urls.forEach( ( url ) => {

  // Crea un objeto para enviarlo
  let ajax = {};
  
  // Cual será el método a utlizar
  ajax.method  = 'POST';
  
  // La URL será en la que vaya el foreach
  ajax.url     = url;
  
  // Función para controlar cuando responda correctamente
  ajax.success = ( response ) => {
    console.log( response );
  };
  
  // Función para controlar los errores
  ajax.error   = ( error, err, e ) => {
    console.log( err );
  };
  
  // Definimos que la sincronía sea desactivada
  ajax.async   = false;
  
  // Envia ese AJAX
  $.ajax( ajax );

});


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Yo no sacaría la opción de asincronicidad, es la ventaja de usar ajax y ademas con tantos request conviene que sean paralelos. Se puede usar Promises en conjunto con ajax para esperar a que terminen todos como explican en esta pregunta [stackoverflow.com/questions/5627284/… el 30 may. 2019 a las 13:12
0

Debes hacerlo de forma asíncrona, al obtener la primera respuesta ir por la segunda petición:

 var contador = 0;

  function traerDato()
  {

    $.ajax({          
      url:'https://www.multivende.com/api/product-stocks/stores-and-warehouses/{{store_id}}/product-versions/null/p/{{i}}',
      method: 'GET',
      timeout:3000,
      headers:{
        contentType: 'application/json; charset=utf-8',
        Authorization: 'Bearer <<TOKEN>>'

      },
      async: true,
      dataType: 'jsonp',
      success:function(data){
        console.log(data)
        contador++;
        if (contador < 514) {
          traerDato();
        }
      }
    });
  }

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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