API或JavaScript不一致-有解無憂

我的模板中有一個 JS 函式，它與 fetch 命令一起作業以中繼到 Django 視圖。奇怪的是，大部分時間它都符合預期，但有時卻沒有，我不知道為什么。

模板中的JS：

<script>
    if (document.querySelectorAll(".nav-link")[1].innerHTML != "Log In") {
        var like = document.querySelector(".likes");
        var quantity = document.querySelector(".quantity");
        like.addEventListener("click", () => likes())
        function likes () {
            fetch(`/likes/${like.value}`, {
                method: "PUT"});
            if (like.innerHTML.slice(0, 2) != "Un") {
                like.innerHTML = "Unlike &#128148";
            }
            else {
                like.innerHTML = "Like &#10084";
            }
            fetch(`/likes/${like.value}`)
            .then(response => response.json())
            .then(post => {
                console.log(post["liked"]);
                quantity.innerHTML = post["liked"].length;
            });
        }
    }
</script>

我的觀點：

@csrf_exempt
@login_required
def likes(request, id):
    user = User.objects.get(username=request.user)
    try:
        post = Post.objects.get(pk=id)
    except Post.DoesNotExist:
        return JsonResponse({"error": "No such post"}, status=404)
    
    if request.method == "GET":
        return JsonResponse(post.serialize())

    if request.method == "PUT":
        #data = json.loads(request)
        if user not in post.liked.all() and post.poster != user:
            print("adding")
            post.liked.add(user)
            post.save()
        else:
            print("removing")
            post.liked.remove(user)
            post.save()
        return HttpResponse(status=204)

它應該在空串列和包含兩個的串列之間交替。

API 或 JavaScript 不一致

但是你可以看到，雖然它通常作業正常，但它有一個地方連續有幾個“[2]”，有時它也有幾個“[]”連續。

實際上這只是在添加第二個 fetch 后才開始，但我不明白為什么；在此之前它交替沒有問題。

uj5u.com熱心網友回復：

正如@Jared Smith 在評論中所說，fetch由于它是異步的，因此無法保證順序，以控制順序使用async并await等待回應結果如下：

    like.addEventListener("click", async () => await likes())
    async function likes () {
        await fetch(`/likes/${like.value}`, {
            method: "PUT"});
        if (like.innerHTML.slice(0, 2) != "Un") {
            like.innerHTML = "Unlike &#128148";
        }
        else {
            like.innerHTML = "Like &#10084";
        }
        await fetch(`/likes/${like.value}`);
        const post = await response.json();
        quantity.innerHTML = post["liked"].length;
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403005.html

標籤：

上一篇：在Django中將相關模型拆分為單獨的應用程式時有什么優點/缺點

下一篇：如何捕獲所有未顯式處理的條帶webhook事件？