2

He creado un script jQuery para, desde mi página web, automatizar la creación de listas en mi canal de YouTube. El problema es que la API no parece ser capaz de atender las quince peticiones de adición de vídeos que hago por lista a través de un each(); añade entre cuatro y seis, y muchas veces no en el orden que debería, así que he pensado que una posible solución sería añadir un retraso al final de cada ciclo del bucle para que el servidor tenga tiempo de reaccionar a cada petición.

El script:

$(function()
{
    $('.crear-lista-yt').click(function() //Al hacer clic en el botón "Publicar"
    {
        var idLista = $(this).parent().siblings('.bloque-canciones').attr('id'); //Captura el id de la lista
        var nombre = $(this).parent().siblings('.nombre-lista').html(); //Captura el nombre de la lista
        var descripcion = $(this).parent().siblings('.descripcion-lista').html(); //Captura la descripción de la lista
        
        var idListaYT; //Variable para almacenar posteriormente el enlace de la lista de YouTube creada

        var peticionLista = gapi.client.youtube.playlists.insert( //Se almacenan en la variable los datos (título, descripción y estado) que definen la lista a crear
        {
            part: 'snippet, status',
            resource: 
            {
                snippet: 
                {
                    title: nombre,
                    description: descripcion
                },
                status: {privacyStatus: 'public'}
            }
        });

        peticionLista.execute(function(respuesta) //Se ejecuta la petición
        {
            idListaYT = respuesta.result.id; //Se almacena el id de la lista creada

            if(idListaYT) //Si se ha creado la lista
            {
                $(`.cancion-lista-${idLista}`).each(function() //Bucle que recorre todas las canciones del recopilatorio personalizado
                {
                    var idVideoYT = $(this).children().children('.enlace-youtube').data('video'); //Id de YoutTube correspondiente a cada cancion

                    var detalles = {videoId: idVideoYT, kind: 'youtube#video'} //Se almacena el id del vídeo y que es un vídeo de YouTube

                    var peticionCancion = gapi.client.youtube.playlistItems.insert( //De manera similar a como se hace con la lista, en esta variable se almacenan los datos de cada vídeo
                    {
                        part: 'snippet',
                        resource: 
                        {
                            snippet: 
                            {
                                playlistId: idListaYT, //El id de la lista a la que se añade el vídeo
                                resourceId: detalles //Los datos de cada vídeo
                            }
                        }
                    });

                    peticionCancion.execute(function(respuesta) //Se ejecuta la petición
                    {
                        if(respuesta.result)
                        {
                            console.log(respuesta.result.snippet.title);
                        }
                        else
                        {
                            console.log('No se ha agregado el vídeo')
                        }
                    });

                    setTimeout(function(){ console.log('Han pasado 1000 ms'); }, 1000);
                });
            }
            else swal('Ups...', 'Algo ha fallado; intenta crear tu lista de YouTube más tarde...', 'error', {button: false}); //Si no, da un mensaje de error
        });
    });
});

Bueno, huelga decir que setTimeout(function(){ console.log('Han pasado 1000 ms'); }, 1000) no me está funcionando; un ejemplo de lo que muestra la consola:

introducir la descripción de la imagen aquí

En esta ocasión ha sido capaz de añadir sólo cinco de los quince vídeos -aquellos para los que se hace console.log(respuesta.result.snippet.title);- y mis intentos de retraso aparecen todos al final:

introducir la descripción de la imagen aquí

Obviamente el proceso no ha durado al menos 15.000 ms, la información ha aparecido de inmediato en la consola.

¿Qué podría hacer?

11
  • 1
    Puedes usar promesas o funciones async, te recomiendo mas la ultima el 31 may. 2021 a las 18:58
  • ¿Puedes detallar un poco más tu sugerencia? Gracias por adelantado. el 1 jun. 2021 a las 18:13
  • 1
    lo que sucede es que js no es como otros lenguajes que se ejecuta en bloque, el hoisting puede ejecutar parte de tu código en distintos lados al tiempo, con promesas o async lo que haces es decirle a js que no siga ejecutando código hasta que termine cierta acción, te recomiendo usar async, es mas fácil el 2 jun. 2021 a las 14:01
  • He encontrado un artículo bastante detallado sobre el tema, por si alguien le interesa: lemoncode.net/lemoncode-blog/2018/1/29/javascript-asincrono el 2 jun. 2021 a las 17:18
  • 1
    Tu error esta en el each, debes probar un arrow function con async, el bloque se sigue ejecutando así el api responda con un 500, debes esperar a que se ejecute el llamado, en cuanto al orden pues eres tu o el usuario el que lo define, creo que recorrer los elementos de la clase no es optimo, porque no pruebas haciendo una estructura como un array y luego solo recorres el 7 jun. 2021 a las 3:24

2 respuestas 2

3
+50

Diría que el problema es que estás lanzando demasiadas peticiones en paralelo, y dado que quieres que queden en el orden que tienes definido, quizás lo mejor sea serializar las peticiones, es decir, que vaya una hasta que se haya completado la anterior.

Para lograrlo sin tener que cambiar toda la lógica de tu script, puedes hacer un arreglo con las peticiones a ejecutar y lanzar la siguiente petición, si la hay, hasta que termine la primera.

Para ello, haría falta factorizar el código de la función que se ejecuta al completar cada petición en una función independiente, digamos alFinalizarPeticion. Esta función, además de imprimir los mensajes, será la responsable de lanzar la siguiente petición. La rutina que lanza la siguiente petición, a su vez, entrega la referencia a alFinalizarPeticion para ser invocada cuando termine y así repetir la operación hasta que terminen todas las peticiones, por ejemplo por este código:

let peticionesPendientes = [];

function ejecutarSiguientePeticion() {
  if (peticionesPendientes.length > 0) {
    let siguientePeticion = peticionesPendientes.shift();
    siguientePeticion.execute(alFinalizarPeticion);
  }
}

function alFinalizarPeticion(respuesta) {
  if(respuesta.result) {
    console.log(respuesta.result.snippet.title);
  } else {
    console.log('No se ha agregado el vídeo')
  }
  ejecutarSiguientePeticion();
}

Ahora, entonces, habría que ajustar el código original para que vaya colocando las peticiones en el arreglo y, al final, lance la primera petición, algo como:

$(function()
{
    $('.crear-lista-yt').click(function() //Al hacer clic en el botón "Publicar"
    {
        var idLista = $(this).parent().siblings('.bloque-canciones').attr('id'); //Captura el id de la lista
        var nombre = $(this).parent().siblings('.nombre-lista').html(); //Captura el nombre de la lista
        var descripcion = $(this).parent().siblings('.descripcion-lista').html(); //Captura la descripción de la lista
        
        var idListaYT; //Variable para almacenar posteriormente el enlace de la lista de YouTube creada

        var peticionLista = gapi.client.youtube.playlists.insert( //Se almacenan en la variable los datos (título, descripción y estado) que definen la lista a crear
        {
            part: 'snippet, status',
            resource: 
            {
                snippet: 
                {
                    title: nombre,
                    description: descripcion
                },
                status: {privacyStatus: 'public'}
            }
        });

        peticionLista.execute(function(respuesta) //Se ejecuta la petición
        {
            idListaYT = respuesta.result.id; //Se almacena el id de la lista creada

            if(idListaYT) //Si se ha creado la lista
            {
                $(`.cancion-lista-${idLista}`).each(function() //Bucle que recorre todas las canciones del recopilatorio personalizado
                {
                    var idVideoYT = $(this).children().children('.enlace-youtube').data('video'); //Id de YoutTube correspondiente a cada cancion

                    var detalles = {videoId: idVideoYT, kind: 'youtube#video'} //Se almacena el id del vídeo y que es un vídeo de YouTube

                    var peticionCancion = gapi.client.youtube.playlistItems.insert( //De manera similar a como se hace con la lista, en esta variable se almacenan los datos de cada vídeo
                    {
                        part: 'snippet',
                        resource: 
                        {
                            snippet: 
                            {
                                playlistId: idListaYT, //El id de la lista a la que se añade el vídeo
                                resourceId: detalles //Los datos de cada vídeo
                            }
                        }
                    });

                    peticionesPendientes.push(peticionCancion);

                });
                ejecutarSiguientePeticion();
            }
            else swal('Ups...', 'Algo ha fallado; intenta crear tu lista de YouTube más tarde...', 'error', {button: false}); //Si no, da un mensaje de error
        });
    });
});

Si aún quieres arriesgarte a enviar varias peticiones en paralelo, y solo espaciarlas en el tiempo, puedes utilizar una infraestructura similar, solo que en lugar de lanzar la siguiente hasta que termine una petición, lanzarla con un timer. Entonces, re-escribiendo la primera parte:

let timerEjecucion;

function ejecutarSiguientePeticion() {
  if (peticionesPendientes.length > 0) {
    let siguientePeticion = peticionesPendientes.shift();
    siguientePeticion.execute(alFinalizarPeticion);
  } else {
    clearInterval(timerEjecucion);
  }
}

function alFinalizarPeticion(respuesta) {
  if(respuesta.result) {
    console.log(respuesta.result.snippet.title);
  } else {
    console.log('No se ha agregado el vídeo')
  }
}

Para iniciar las ejecuciones, entonces, habría que establecer el timer. Estoy usando un timer tipo intervalo para que se ejecute de manera automática varias veces, hasta que complete la tarea. Para iniciar la cadena, habría que llamar a setInterval(), de la siguiente manera:

  timerEjecucion = setInterval(ejecutarSiguientePeticion, 1000);
  ejecutarSiguientePeticion();

He colocado una llamada a ejecutarSiguientePeticion() justo después de setInterval() para no esperar un segundo antes de que se lance la primera petición. Se podría eliminar esta línea si la espera es necesaria o aceptable.

Esto lanzará una petición cada segundo hasta completar las que estén en el arreglo.

OJO: El código podría contener errores de sintaxis, lo he escrito aquí mismo y, dado que no publicas un ejemplo mínimo y verificable, no tengo fácil ponerlo a prueba. Espero que, si entiendes la solución con la explicación que te he dado, seas capaz de corregir cualquier detalle que se me haya podido escapar.

1
  • 1
    La primera solución funciona perfectamente, ¡muchas gracias! el 12 jun. 2021 a las 17:21
3

No tengo puntaje para dejar un comentario, pero espero ser de utilidad.

En la mayoría de las apis de google que yo he podido usar, primero se hacen todas las operaciones de inserción y al final se ejecutan todas juntas. Por lo que pude entender de tu codigo, vos estas insertando, ejecutando, en ciclo.

intenta hacer el ciclo únicamente de las inserciones y finalmente hace la ejecución.

Si mi respuesta no es acertada, déjamelo saber asi la borro, saludos.

1
  • 2
    Ahora ya tenés reputación para comentar, pero esto es una buena respuesta, no iría como comentario. No es necesario que una publicación tenga código para responder a una pregunta.
    – Pollo
    el 12 jun. 2021 a las 16:00

Tu Respuesta

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

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