执行点击事件时，获取请求被取消答案

【问题标题】：Fetch request getting cancelled, when executing click event执行点击事件时，获取请求被取消
【发布时间】：2021-11-22 16:56:35
【问题描述】：

我在一个元素上有一个“点击事件”，它首先通过 window.location.href 定位窗口，然后从服务器获取数据，然后呈现 HTML，但是由于获取请求被取消，我没有得到所需的输出，为什么?

async function retrieveItems(category='any', sub_cat='any') {
    let url;
    if(category === "any") {
        url = "_items/";
    }
    else {
        url = "_items/"+category+"/"+sub_cat+"/";
    }
    let response = await fetch(url);
    if(response.ok) {
        let responseData = await response.json();
        return responseData;
    }
}

// Retreiving and Rendering Items on items.html
async function items_sub_cat(event) {
    window.location.href = 'items.html';
    let category = event.currentTarget.parentNode.parentNode.previousSibling.innerHTML;
    let sub_category_name = event.currentTarget.innerHTML;
    let responseData = await retrieveItems(category, sub_category_name);
    renderItems(responseData, "items_by_sub_cat");
    buttons();    
}



let sub_category = document.getElementsByClassName("sub_category_name");
for(let i=0; i<sub_category.length; i++) {
    sub_category[i].addEventListener("click", items_sub_cat);
}

有人可以在这方面提供帮助吗？

【问题讨论】：

您是否打算先将页面更改为/items.html，然后再获取/渲染项目？
是的，正是首先将页面更改为 items.html，然后检索数据然后呈现它

标签： javascript fetch window.location

【解决方案1】：

你不是忘了压制事件吗？尝试将event.preventDefault() 添加到点击监听函数中。

【讨论】：