0

Tengo una función para cargar síncrona y asíncronamente información de una base de datos que esta graba y recupera mediante una petición por XMLHttpRequest y que hasta hace dos meses funcionaba pero, ha actualizado Chrome su navegador y me ha fastidiado.

Esta es la función:

function sendRequest(url,data,type) {
if (typeof(data) == 'undefined') {
    data = null;
}
    
if (typeof(type) == 'undefined') {
    type = (data === null ? 'GET':'POST');
}
    
var async = false,
    req = new XMLHttpRequest();

if (req) {
    req.open(type, url, async);
    if (type=='POST') {
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; Charset=utf-8;');
    }
    req.send(data);
}
return req;
}

En Firefox funciona perféctamente pero en Chrome, no. Aparece en ambos navegadores el siguiente mensaje en consola: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience".

Si en la función req.open() quito el async, que lo necesito en false, ya no aparece la advertencia.

Cuál es la forma adecuada de corregirlo?

12
  • Literalmente el mensaje significa: XMLHttpRequest síncrono en el hilo principal está en desuso debido a sus efectos perjudiciales para la experiencia del usuario final, como bien dice @Trauma, ¿hay algún motivo que justifique el uso de una petición síncrona?
    – A. Cedano
    Commented el 9 ago. 2020 a las 19:44
  • No hay una necesidad imperiosa de utilizar síncrona, pero la aplicación fue diseñada así hace 1 década y es ahora cuando no puede usarse. Mala experiencia no hay independientemente de lo que diga el mensaje. Esto se puede migrar a asíncrona?
    – Qadesh
    Commented el 9 ago. 2020 a las 20:12
  • No hay mala experiencia, pero puede haberla tarde o temprano. El problema es que en las peticiones síncronas el hilo principal queda bloqueado mientras se procesa la petición y basta un pequeño cambio en el contexto para que empiece a haber problemas (por ejemplo, crecimiento del número de usuarios), hoy día casi todas las peticiones son asíncronas y por eso Chrome te manda ese mensaje. Revisa la documentación allí hay ejemplos que te ayudarán a modernizar el código.
    – A. Cedano
    Commented el 9 ago. 2020 a las 20:18
  • La solucion es mas sencilla de lo que crees, simplemente pon todo el codigo que tenga que ver con una peticion AJAX dentro de una funcion. asi te debera funcionar. y si amigo mio, eso que tienes ahi es AJAX pero realizado con javascript puro. en pocas palabras si necesitas ejecutar esa peticion una funcion debe encargarse de ello, no puede estar en el contexto global.
    – Layer
    Commented el 9 ago. 2020 a las 20:19
  • Sí, sí, se que es ajax jeje pero esto está escrito en JS puro jeje. Es que data esto de...2005 o por ahí ahora que lo pienso. Miraré ambas soluciones y probaré. Gracias.
    – Qadesh
    Commented el 9 ago. 2020 a las 20:21

1 respuesta 1

0

Voy a proponerte una solucion generica que te ayudara para que no tengas que crear multiples funciones que te hagan una peticion ajax, en vez de ello se usaria esa misma funcion para todo, voy a ponerte este pequeño ejemplo:

function ajax(method = "GET", url, body){

    return new Promise((res, rej) =>{
        const xmlh = new XMLHttpRequest();
        const data = new FormData();

        if(body){
            for(let prop in body){
                if(prop === "data"){
                    for(let bodyProp in body[prop]){
                        data.append(bodyProp, body[prop][bodyProp]);
                    }
                }else if(prop === "headers"){
                    for(let headerP in body[prop]){
                        xmlh.setRequestHeader(headerP, body[prop][headerP]);
                    }
                }
            }
        }

        xmlh.open(method, url);
        xmlh.onload  = e => res(e.response);
        xmlh.onerror = e => rej(e);

        if(method.toUpperCase() === "GET"){
            xmlh.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xmlh.send();
        }else{
            xmlh.send(data);
        }
        
    });

}

//Ejemplo de uso:
ajax("GET", "http://google.com", 
    {
        data: {
            name: "your name",
            gender: "male",
            age: 18,
            children: false
        }
    }
).then(res =>{
     //aqui atrapas la respuesta de ajax (res).
}).catch(e =>{
     //Aqui atrapas el posible error que te devuelva ajax.
});

De esa manera tienes una funcion reutilizable configurable con los datos que necesites para que puedas usarla, realmente entrar en detalles es un poco complicado en este caso.

Pero en resumen, la Promise te ayuda a manejar el codigo asincrono de mejor forma, FormData es un builder que permite enviar un conjunto de datos haciendo uso de una estructura parecida a un JSON.

Los ciclos usados se usan para configurar tanto en la peticion (xmlh) los headers adicionales que quieras enviar (si necesitas esto), y tambien a su vez se configura la data a enviar por el FormData si se usa una peticion POST, ya que en este caso el FormData es solo usado para la peticion tipo POST.

Tambien comprobamos como debemos enviar la peticion, en caso de que sea GET o POST.

Posdata: la verdad no he comprobado este codigo (no lo he ejecutado), simplemente se me ocurrio, pero si este codigo no te llega a funcionar dejame la observacion yo lo corrijo cuando tenga un poco mas de tiempo.

1
  • Agradezco y entiendo las funcionalidades que propones. Tengo que ver dónde cargar algo similar ya que la parte donde va no permite, o mejor dicho no ejecuta, código escrito en jQuery como $.ajax o jQuery.ajax. La versión de jQuery que usa la plataforma es 1.7.1 que, no puedo actualizarla pero veré si puedo meter noConflict. Está complejo, la verdad.
    – Qadesh
    Commented el 10 ago. 2020 a las 14:06

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.