HTTP DELETE/PUT请求无法删除或编辑电商项目商品问题求助

问题根因与修复方案 #

核心问题梳理

1. editProduct 函数逻辑顺序错误：函数入口直接执行 edit = true 和 console.log('works')，未包裹在编辑按钮的判断逻辑内，导致点击表格任意区域（包括删除按钮）都会触发这两行代码，这就是点击删除时会打印 works 的核心原因。
2. 删除成功后刷新列表的方法调用错误：你定义的全局拉取商品列表的方法是 listAdminProducts()，但 delete 请求的回调中错误调用了不存在的 ui.listAdminProducts()，导致删除后没有重新拉取最新的商品列表渲染页面。
3. 异常捕获写法错误：.catch() 需要传入回调函数处理异常，直接写字符串 "Error on delete" 无法捕获报错，排查问题时看不到请求错误信息。
4. 删除成功提示、id 清空逻辑位置错误：这两行代码写在了删除按钮的判断分支外，只要点击表格区域就会触发删除成功提示，逻辑不符合预期。

修复代码片段

1. 修复 editProduct 函数逻辑

function editProduct(e) {
    // 把通用逻辑移到编辑按钮判断内部
    if (e.target.classList.contains('edit-btn')) {
        edit = true;
        console.log('works');
        id = e.target.getAttribute('id');
        http.get(`${productsURL}/${id}`).then((data) => {
            imgInput.value = data.image;
            nameInput.value = data.name;
            priceInput.value = data.price;
            stockInput.value = data.stock;
            categoryInput.value = data.category;
            typeInput.value = data.type;
            descriptionInput.value = data.description;
        });
    };
}

2. 修复 deleteProduct 函数逻辑

function deleteProduct(e) {
    console.log(e.target);
    if (e.target.classList.contains('admin-delete-btn')) {
        console.log(e.target);
        id = e.target.getAttribute('id');
        console.log(id);
        http
            .delete(`${productsURL}/${id}`)
            .then(() => {
                // 调用全局的列表刷新方法，而非ui下不存在的方法
                listAdminProducts();
                ui.showSuccessMessage('Product deleted', adminContainer);
                id = '';
            })
            // 传入回调处理异常
            .catch(err => console.log("Error on delete", err));
    }
}

3. 附带小问题修复：cancelEdit 函数补全方法调用括号

function cancelEdit() {
    ui.clearFields(); // 补全方法调用的括号
    imgInput.className = '';
    nameInput.className = '';
    priceInput.className = '';
    stockInput.className = '';
    categoryInput.className = '';
    edit = false;
}

内容的提问来源于stack exchange，提问作者Szabi Vojtek