如何在待办列表中删除任务？解决DELETE请求404错误

核心问题分析 #

• API参数错误：你使用的todos删除接口要求传入任务自身的id，而非userId。接口地址格式为https://dummyjson.com/todos/{taskId}，传入userId会导致接口无法匹配对应资源，返回404。
• 代码逻辑漏洞：
  • 子组件中deleteTask方法未正确传入任务id，且未放置在methods选项内，存在语法错误。
  • 调用store.dispatch('deleteTask')时未传递id参数，导致请求URL中的id为undefined，触发404错误。

修正步骤 #

1. 修正子组件代码 #

将deleteTask移入methods，并传入当前任务的id：

<template>
  <div :class="{ task: task.completed }">
    {{ task.todo }}
    <button @click="deleteTask" class="delete">Delete</button>
  </div>
</template>

<script>
export default {
  props: ['task'],
  methods: {
    deleteTask() {
      // 传递任务自身的id给store action
      this.$store.dispatch('deleteTask', this.task.id);
    }
  }
};
</script>

2. 确认Store中Action逻辑 #

你的Store里deleteTask的逻辑本身是正确的，只要传入合法的任务id，就能生成正确的请求URL：

async deleteTask(context, id) {
  const res = await fetch(`https://dummyjson.com/todos/${id}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
    },
  });
  if (res.ok) {
    context.dispatch('getTasks'); // 删除成功后重新拉取任务列表
  }
  return res.ok;
}

验证逻辑 #

修正后点击删除按钮：

• 子组件会将当前任务的id传递给store的deleteTask action
• 请求URL变为https://dummyjson.com/todos/[正确任务id]，接口可正常识别并删除对应任务
• 删除成功后自动重新拉取任务列表，页面会同步更新

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