Creé un botón Me gusta de IG donde el número de Me gusta cambia después de un clic. Agregué 2 funciones de búsqueda, una con PUT. Probé de varias maneras, pero los resultados son los mismos: la búsqueda GET se ejecuta primero. ¿Cómo puedo prevenir eso?
function liking(tweetid) { let l = document.querySelector('#numlikes-' + tweetid); fetch(`tweets/${tweetid}`, { method: 'PUT', body: JSON.stringify({ tweet_like: 1 }) }); fetch(`tweets/${tweetid}`) .then(response => response.json()) .then(post => { l.innerHTML = post.likes; }); }Javascript es un lenguaje síncrono, una línea de código no está esperando una línea antes de terminar de forma predeterminada. Por operaciones casi instantáneas que no son importantes y no importarán. Aquí, dado que la recuperación necesita comunicarse con un servidor, comienza su segunda recuperación, antes de que finalice la primera. Hay dos soluciones simples para resolver este problema.
Uso de espera asíncrona
Desde ES6 tenemos la capacidad de usar async await:
async function liking(tweetid) { let l = document.querySelector('#numlikes-' + tweetid); await fetch(`tweets/${tweetid}`, { method: 'PUT', body: JSON.stringify({ tweet_like: 1 }) }); await fetch(`tweets/${tweetid}`) .then(response => response.json()) .then(post => { l.innerHTML = post.likes; }); } Encadenamiento con .then :
function liking(tweetid) { let l = document.querySelector('#numlikes-' + tweetid); fetch(`tweets/${tweetid}`, { method: 'PUT', body: JSON.stringify({ tweet_like: 1 }) }).then(() => { fetch(`tweets/${tweetid}`) .then(response => response.json()) .then(post => { l.innerHTML = post.likes; }); }); }fetch es una función asíncrona. Significa que no puede predecir qué respuesta fetch recibirá primero. Para hacer que llame en orden, debe llamar a GET fetch en la devolución de llamada de respuesta de PUT fetch .
function liking(tweetid) { let l = document.querySelector('#numlikes-' + tweetid); fetch(`tweets/${tweetid}`, { method: 'PUT', body: JSON.stringify({ tweet_like: 1 }) }).then(() => { fetch(`tweets/${tweetid}`) .then(response => response.json()) .then(post => { l.innerHTML = post.likes; }); }) }