Как обеспечить выполнение запроса fetch GET после обновления базы данных?

У меня проблемы с тем, чтобы мой GET-запрос в Javascript выполнялся после PUT. Иногда обещание JSON возвращается с обновленными данными, иногда нет! Это кажется случайным. При перезагрузке страницы данные всегда отображаются правильно. Я получаю ошибку "Fetch failed loading: PUT" в моей консоли, несмотря на успешное обновление базы данных. Я знаю о await/async, но мне было неясно, является ли это моим решением, и если да, то как мне реализовать это с правильным синтаксисом. Вот мой JS:

function like(id) {

    like_button = document.getElementById(`like-button-${id}`);
    
    if (like_button.style.backgroundColor == 'white') {
        fetch(`/like/${id}`, {
            method:'PUT',
            body: JSON.stringify({
                like: true
            })
        });

        like_button.style.backgroundColor = 'red';
    }
    else {
        fetch(`/like/${id}`, {
            method:'PUT',
            body: JSON.stringify({
                like: false
            })
        });

        like_button.style.backgroundColor = 'white';


    }

    fetch(`/like/${id}`)
    .then(response => response.json())
    .then(post => {
        like_button.innerHTML = post.likes;
    });

}

В случае, если это поможет, вот мое представление в файле views.py:

@csrf_exempt
def like(request, id):
    post = Post.objects.get(id=id)
    user = User.objects.get(username=request.user.username)

    if request.method == "GET":
        return JsonResponse(post.serialize(), safe=False)

    if request.method == "PUT":
        data = json.loads(request.body)
        print(data.get("like"))
        if data.get("like"):
            post.Likes.add(user)
        else:
            post.Likes.remove(user)
        post.save()
        return HttpResponse(status=204)

Заранее благодарю за помощь!

Вернуться на верх