调用DELETE接口后页面自动刷新的问题求助

安全阿岳

2026-8-4

解决DELETE请求触发页面自动刷新的问题

我一眼就注意到你踩了一个很容易忽略的JavaScript语法坑——你的函数名用了delete，这可是JS的保留关键字啊！这就是导致页面莫名刷新的根本原因。

为什么会这样？

delete是JavaScript内置的操作符，用来删除对象的属性，你把它用作自定义函数名时，会和全局的delete操作符产生冲突，导致引擎解析执行时出现意料之外的行为，而页面刷新就是这种冲突引发的副作用之一。你提到直接在控制台调用delete(1)也会触发刷新，这更坐实了这个问题——因为此时函数的定义和内置操作符冲突，执行逻辑完全偏离了你的预期。

解决方案：修改函数名

只需要把函数名改成非保留字的名称，比如deleteProduct，就能解决这个问题。下面是修改后的完整代码：

修改后的删除函数

async function deleteProduct(param) {
    const response = await fetch(`${api_Url}/products${param}`, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `bearer ${token}`
        },
    }).then((response) => {
        console.log(response);
    })
};

修改对应的调用代码

const deleteBtn = document.querySelectorAll('.delete_icon');

deleteBtn.forEach(element => {
    element.addEventListener('click', event => {
        event.preventDefault();

        const Id = event.currentTarget.id;
        deleteProduct(Id); // 这里同步修改函数名
    });
});