如何使用 Axios 一次执行一项删除请求？

Question

因此，我正在使用待办事项列表 api 构建一个基本的待办事项列表应用程序，但我无法弄清楚如何在用户单击一个待办事项时删除一个待办事项删除按钮。我正在使用为创建的新待办事项创建的 ID#。

我认为我目前拥有的代码可以工作，但是当我点击删除按钮时没有任何反应。

对我做错了什么有任何见解吗？

这是我的所有 JavaScript，但我遇到的问题是代码底部的最后一个 addEventListener：

function Todo(title, description, price){
    this.title = title;
    this.description = description;
    this.price = price;
}

document.todo.addEventListener("submit", function(e){
    e.preventDefault();
    var titleForm = document.todo.title.value;
    var descriptionForm = document.todo.description.value;
    var priceForm = document.todo.price.value;
    var newTodo = new Todo(titleForm, descriptionForm, priceForm);

    axios.post("https://api.todo.io/name/todo", newTodo).then(function(response){
    console.log(response.data);
})
})

axios.get("https://api.todo.io/name/todo").then(function(response){
    for(var i = 0; i < response.data.length; i++){
        var h1 = document.createElement("h1");
        var h3 = document.createElement("h3");
        var h3Price = document.createElement("h3");
        var div = document.createElement("div");
        var delButton = document.createElement("button");

        var displaytitle = document.createTextNode(`Title: ${response.data[i].title}`);
        var displayDescription = document.createTextNode(`Description: ${response.data[i].description}`);
        var displayPrice = document.createTextNode(`Price: ${response.data[i].price}`);
        var displayButton = document.createTextNode("Delete");

        h1.appendChild(displaytitle);
        h3.appendChild(displayDescription);
        h3Price.appendChild(displayPrice);
        delButton.appendChild(displayButton);

        div.appendChild(h1);
        div.appendChild(h3);
        div.appendChild(h3Price);
        div.appendChild(delButton);


        document.body.appendChild(div);

           delButton.addEventListener("submit", function(e){
               e.preventDefault();
               axios.delete(`https://api.todo.io/name/todo/${response.data[i]._id}`).then(function(response){
                console.log("Todo Deleted!");
            })
           })  
        }
    console.log(response.data);
});

Answer 1

来自 the docs 的 'submit' 事件：

Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)

至于您的作用域问题，如果您将 for 循环的主体提取为函数：

function addTodo({ _id, description, price, title }) {
    const h1 = document.createElement("h1");
    const displaytitle = document.createTextNode(`Title: ${title}`);
    h1.appendChild(displaytitle);

    const h3 = document.createElement("h3");
    const displayDescription = document.createTextNode(`Description: ${description}`);
    h3.appendChild(displayDescription);

    const h3Price = document.createElement("h3");
    const displayPrice = document.createTextNode(`Price: ${price}`);
    h3Price.appendChild(displayPrice);

    const delButton = document.createElement("button");
    const displayButton = document.createTextNode("Delete");
    delButton.appendChild(displayButton);
    delButton.addEventListener("click", function(e) {
        e.preventDefault();

        axios
          .delete(`https://api.todo.io/name/todo/${_id}`)
          .then(function(response) {
            console.log("Todo Deleted!");
          });
    });

    const div = document.createElement("div");
    div.appendChild(h1);
    div.appendChild(h3);
    div.appendChild(h3Price);
    div.appendChild(delButton);

    document.body.appendChild(div);
}

axios.get("https://api.todo.io/name/todo").then(function(response) {
    for (var i = 0; i < response.data.length; i++) {
        addTodo(response.data[i]);
    }
    console.log(response.data);
});

如何使用 Axios 一次执行一项删除请求？

How to I perform a delete request one item at a time using Axios?

javascript

http-delete

axios