Estoy tratando de buscar un punto final que devuelva un objeto json para mostrar el resultado en mi aplicación.
este json devuelve una lista de usuarios en línea, por lo que necesito actualizar estos datos cada X segundos/minutos.
He escrito este código:
function getJustBlabData(url) { return new Promise(resolve => { const getData = fetch(url); resolve(getData) }) } getJustBlabData('https://justblab.com/baxf/widget.php?q=online_usr') .then((res) => res.json() .then((data) => { this.justBlab = data this.loading = false console.log(this.justBlab) }) )Lo he intentado con setInterval como:
function getJustBlabData(url) { return new Promise(resolve => { setInterval(() => { const getData = fetch(url); resolve(getData) }, 1000) }) }pero algo estoy haciendo mal, pero que?
En primer lugar, use fetch directamente, ya que su función getJustBlabData es esencialmente solo devolver fetch(url) envuelto en una nueva Promesa, pero como fetch ya devuelve una Promesa, no hay necesidad de ese código en absoluto.
es decir
function getJustBlabData(url) { return new Promise(resolve => { const getData = fetch(url); resolve(getData) }) } getJustBlabData(url).then ....es equivalente (pero en muchos sentidos peor para el manejo de errores) a
fetch(url).then ....Si quieres hacer algo cada X segundos, hazlo todo en el intervalo
Como esto
setInterval(() => { this.loading = true; fetch('https://justblab.com/baxf/widget.php?q=online_usr') .then((res) => res.json()) .then((data) => { this.justBlab = data; this.loading = false; console.log(this.justBlab); }); }, 1000); Ahora, this.justBlab se actualiza cada segundo
Nota: Además, he aplanado su pirámide .then en una cadena .then
para abordar la situación en la que las solicitudes pueden tardar más de un segundo
(() => { const processBlab = () => { this.loading = true; fetch('https://justblab.com/baxf/widget.php?q=online_usr') .then((res) => res.json()) .then((data) => { this.justBlab = data; this.loading = false; console.log(this.justBlab); setTimeout(() => processBlab(), 1000); }); processBlab(); })(); La única razón por la que puse que todo en un IIFE es para preservar this , ya que no hay contexto en la pregunta de qué es this .
Puede usar una promesa para crear una función de "esperar" y reiniciar el proceso nuevamente (obtener un nuevo conjunto de datos) una vez que se complete. Aquí utilicé un retraso de 5 segundos entre cada ciclo.
Haciéndolo de esta manera, si el servidor tarda 10 segundos en responder, hará una nueva solicitud 5 segundos después de esa respuesta y evitará acumular solicitudes.
let delayMSTime = 5000; let howMany = 1; function sleep(time) { return new Promise((resolve) => setTimeout(resolve, time)); } function getJustBlabData(url) { return new Promise(resolve => { const getData = fetch(url); resolve(getData); }) } function GoGetEm(myDelay) { getJustBlabData('https://justblab.com/baxf/widget.php?q=online_usr') .then((res) => res.json()) .then((data) => { this.justBlab = data; this.loading = false; console.log(this.justBlab); }).then(() => { console.log("sleeeping for the "+howMany+" time:" + myDelay); sleep(myDelay).then(() => { howMany++; GoGetEm(myDelay); console.clear(); }); }); } GoGetEm(delayMSTime);