Cada vez que se hace clic en uno de mis botones, activé una llamada a la API de hoja de aviso para obtener datos de advice . Espero que la carga útil varíe. Pero se devuelven exactamente los mismos datos después de cada llamada.
Intenté llamar a la función getAdvice como devolución de llamada, pero no funcionó.
¿Me estoy perdiendo de algo?
'use strict' const title = document.querySelector('.advice-title') const desc = document.querySelector('.advice-text') const btn = document.querySelector('.btn') const getAdvice = async () =>{ try{ const response = await fetch('https://api.adviceslip.com/advice'); if (!response.ok){ throw new Error('Api connection problem') } const responseJson = await response.json(); const data = responseJson.slip; const id = `ADVICE #${data.id}`; const advice = `"${data.advice}"`; title.textContent = id; desc.textContent = advice; } catch (e) { console.error(e) } } btn.addEventListener('click', () => { getAdvice() })Parece que hay un problema con el almacenamiento en caché en el que varias solicitudes muy poco espaciadas en el tiempo desde una página web harán que se devuelva el mismo resultado. Si agrego un valor cambiante único a la URL para anular el almacenamiento en caché como este:
const response = await fetch('https://api.adviceslip.com/advice?t=' + Math.random());Entonces, obtengo una respuesta única cada vez.
Experimenté enviando varios encabezados para deshabilitar el almacenamiento en caché en lugar del truco t=xxx , pero esos encabezados desencadenan un error de COR y fetch() no tiene éxito porque los encabezados personalizados como este no pasan la prueba de una solicitud CORS "simple". y, por lo tanto, requieren una verificación previa que el sitio de destino no admite. Entonces, el ?t=xxx donde xxx es diferente en cada solicitud parece funcionar.
Encontré esto y funcionó para mí. Agregar const response = await fetch("https://api.adviceslip.com/advice", { cache: "no-cache" });