I created an IG like button where the number of like changes after a click. I added 2 fetch functions - one with PUT. I tried multiple ways but the results are same - the GET fetch is getting executed first. How can I prevent that?
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 is a synchronous language, a line of code is not waiting for line before to finish by default. By near instant operations that is not important and won’t matter. Here since the fetch needs to communicate with a server your second fetch starts, before the first one finished. There are two simple solutions to solve this issue
Using async await
Since ES6 we have the ability to use 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;
});
}
Chaining with .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 is an async function. It means you cannot predict which fetch response you receive first. To make it to call in order you should call GET fetch in the response callback of 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;
});
})
}