es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Solicitudes paralelas con ajaxSetup dataFilter.

04 Jun, 2023 Programación

Tengo que conectarme a una solicitud ajax existente (que no puedo cambiar, está dentro de nuestro CMS) y agregar algunos datos adicionales. Para ser más específicos, se trata de una biblioteca multimedia que carga datos de imagen (json), y estoy agregando algunas imágenes más desde una fuente externa.

var promise_waiting = [];

jQuery.ajaxSetup({
    beforeSend: function() {

    // starting external library request, so they can run in parallel
    promise_waiting = new Promise( function(resolve, reject) {
        jQuery.get(external_library_url, {}, function(data) {
            if(data) {
                console.log('solicitud de biblioteca externa terminada');
                resolve(data);
            }
        });
    });

    return true;
},
dataFilter: async function (data) {
    console.log('solicitud original completada');

    // waiting for that external library request to resolve
    ext_data = await promise_waiting;

    console.log('ambas solicitudes completadas');
    return data.concat(ext_data);
}
})

Ambas solicitudes terminan de la manera que quiero, por lo que está bien. El problema es que dataFilter no puede ser una función asíncrona, no hay errores ni advertencias pero el código que se ejecutaría después de la solicitud (renderizado de las vistas previas de la imagen) nunca se activa.

Mi única alternativa actual es usar una solicitud ajax no asíncrona en dataFilter, lo cual no es óptimo ya que ambas solicitudes individualmente llevan bastante tiempo.

Estoy buscando alternativas a esta configuración, gracias de antemano.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible alternativa a la configuración actual es utilizar una función de devolución de llamada en lugar de dataFilter. La función beforeSend puede llamar a la biblioteca externa de solicitud y pasar el resultado a la función de devolución de llamada que se llamará cuando se complete la solicitud Ajax original. La función de devolución de llamada puede modificar los datos según sea necesario y continuar con la representación de las imágenes previas.

    function handleAjaxData(data) {
  console.log('solicitud original completada');
  // modificar datos según sea necesario con datos externos
  jQuery.get(external_library_url, {}, function(ext_data) {
    console.log('solicitud de biblioteca externa completada');
    data = data.concat(ext_data);
    // continuar con la representación de las imágenes previas
  });
  return data;
}

jQuery.ajaxSetup({
  beforeSend: function() {
    // iniciando la solicitud de biblioteca externa
    jQuery.get(external_library_url, {}, function(data) {
      if(data) {
        console.log('solicitud de biblioteca externa completada');
        // guardar los datos externos para más tarde
        promise_waiting = data;
      }
    });
    return true;
  },
  complete: function(jqxhr, status) {
    // verificar si la solicitud original fue exitosa
    if (status === "success") {
      console.log('solicitud original completada');
      // modificar datos según sea necesario con datos externos
      var data = handleAjaxData(jqxhr.responseJSON);
      // continuar con la representación de las imágenes previas
    }
  }
});

    En esta configuración, handleAjaxData se llama después de que se completa la solicitud Ajax original y puede modificar los datos según sea necesario con los datos externos recuperados en la función beforeSend. La función complete se utiliza en lugar de dataFilter para manejar los datos modificados y continuar con la representación de las imágenes previas. Los datos externos se guardan en una variable (promise_waiting) para que puedan ser accesibles más tarde por handleAjaxData.

Comments are closed.