javascript - 使用 fetch 发布数据后自动刷新

Question

我尝试使用 fetch 方法使待办事项列表变得简单；所有请求都可以正常查看结果，如果我尝试添加函数 updateData 以在 add 或 deleteTask 中 promise ，则必须刷新网站，整个列表会增加一倍。我可以询问一些有关如何使其与自动刷新一起使用的提示吗？ 我使用 JSON 服务器来存储数据。

   function updateData() {
            var ul = document.querySelector('.listOfTasks');

            fetch('http://localhost:3000/tasks')
                .then((res) => res.json())
                .then((data) => {
                    let tasks = '';
                    data.forEach(function (task) {
                        tasks +=
                            `<li class="taskElement" id=${task.id}><input type="checkbox" class="checkbox">
                                <span class="task"> ${task.name}</span>
                                <img class="deleteBtn" id=${task.id} src="../assets/trash.png"> </img>
                             </li>`

                    })
                    ul.insertAdjacentHTML('afterBegin', tasks)
                })
        }



function addTask(e) {
        e.preventDefault();
        var taskName = document.querySelector('.taskName').value;
        var ul = document.querySelector('.listOfTasks');
        if (taskName === "") {
            alert("Please write something")
        } else {
            fetch('http://localhost:3000/tasks', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({name: taskName})
            })
                .then((res) => res.json())
        }
    }

function deleteTask(e) {
        e.preventDefault();

        if (e.target.className === 'deleteBtn') {

            fetch('http://localhost:3000/tasks/' + e.target.id, {
                method: 'DELETE',
            })
                .then((res) => res.json())
                .then((data) => console.log(data))

        }
    }

Answer 1

如果你想运行updateData()要刷新您的列表，那么您需要替换 <ul> 的内容而不是添加到其中。

因此只需更改

ul.insertAdjacentHTML('afterBegin', tasks);

至

ul.innerHTML = tasks;

参见https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML用于文档。