3👍
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;
});
});
}
0👍
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;
});
})
}
0👍
I posted an answer in Stack Exchange to this problem:
It includes the full AJAX Helper typescript (it is typescript though) that allows you to make multiple ajax calls on an array in series (wait for one to finish before executing next).
Note thought, this solution is only if you want to make the SAME request on an array of objects, if you want to make different requests then you would have to manually chain them with the .then
- [Django]-Django 1.9 url include AttributeError 'str' object has no attribute 'regex'
- [Django]-Django admin login failure with valid user
- [Django]-Got InvalidClientIdError (invalid_request) Mismatching redirect URI. using requests_oauthlib