Jquery $.get Script para scripts de retroceso no funciona

Question

¿Cómo puedo ir sobre la configuración de un script de Fallback, usando jQuery o cualquier otro método? ¿Por qué este método no funciona? https://api.jquery.com/jQuery.getScript/#jQuery-getScript Uso el código de abajo para establecer un script de descomposición en caso de que consiga un 404 o similar en mi script primario. $.getScript(  https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js  ) .fail(function( jqxhr, settings, exception ) { $.getScript(  https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js  ) }) Cuando agrego algunos caracteres aleatorios a la primera URL para simular una situación en la que el script no está disponible, espero que mi código cargue el script de la segunda URL y continúe la ejecución, pero obtengo este error en su lugar GET https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/threes.min.js?_=1608231826270 net::ERR_ABORTED 404 Y mi código se detiene. Esto no debería estar sucediendo ya que todo mi código está en la llamada .done() de la primera llamada de $.getScript.

Gpt · Accepted Answer

El problema que estás experimentando es que el método $.getScript() de jQuery no maneja automáticamente las fallas de carga de scripts como lo haría con una llamada AJAX. Por lo tanto, el método .fail() no se está ejecutando en el flujo esperado.

Para solucionar este problema, puedes utilizar un enfoque alternativo para cargar los scripts de forma asincrónica y manejar las fallas de carga de manera adecuada. Aquí te dejo un ejemplo de cómo puedes hacerlo:

javascript
function loadScript(url) {
    return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

loadScript("https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js")
    .then(function() {
        // Script cargado exitosamente
    })
    .catch(function() {
        // Error al cargar el script, intenta con otra URL
        loadScript("https://cdn.jsdelivr.net/npm/three/build/three.min.js")
            .then(function() {
                // Script alternativo cargado exitosamente
            })
            .catch(function() {
                // Error al cargar el script alternativo
                console.error("Error al cargar el script alternativo");
            });
    });

En este código, se define una función loadScript() que retorna una Promesa que resuelve cuando el script se carga correctamente y rechaza si hay un error en la carga. Luego, se usa esta función para cargar el primer script y en caso de error se intenta cargar un script alternativo.

Este enfoque te permitirá manejar de manera más efectiva las fallas en la carga de scripts y continuar con la ejecución de tu código de manera adecuada. Espero que esta solución te sea de ayuda.

Respondida el Dec 18, 2020 a las 20:46 - por Gpt

Gemini · Answer

El problema con tu código es que estás llamando a .fail() en la llamada .getScript() de la primera URL. Esto significa que cuando la primera llamada a $.getScript() falla, se ejecuta el código dentro de la devolución de llamada .fail(), que intenta cargar el script de la segunda URL. Sin embargo, la llamada .getScript() de la segunda URL no se realiza dentro de la devolución de llamada .done() de la primera llamada .getScript(), por lo que se ejecuta incluso si la primera llamada se realiza correctamente.

Para solucionar este problema, debes mover el código que intenta cargar el script de la segunda URL dentro de la devolución de llamada .done() de la primera llamada .getScript(). Aquí tienes el código corregido:


$.getScript( "https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js" )
    .done(function() {
      // El script de la primera URL se ha cargado correctamente. Continuar con la ejecución.
    })
    .fail(function( jqxhr, settings, exception ) {
      $.getScript( "https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js" )
    });

De esta manera, el script de la segunda URL solo se cargará si la primera llamada a .getScript() falla.

Respondida el Dec 18, 2020 a las 20:54 - por Gemini

Jquery $.get Script para scripts de retroceso no funciona

2 Respuestas: