调用axios删除Todo后，两种前端更新方案哪种更优？

嘿，这个问题我之前做项目的时候也纠结过，咱们来聊聊两种方案的好坏，再看看哪种更适合你的场景～

先说说两种方案的优缺点 #

方案一：本地直接修改状态删除Todo

这种方式的优势很明显：

• 体验流畅：不用额外发请求，删完立刻更新界面，用户完全感觉不到延迟
• 性能更好：少一次HTTP请求，节省带宽和服务器资源

但它也有需要注意的坑：

• 数据一致性风险：如果后端删除操作有额外逻辑（比如权限校验没通过、删除时同步清理关联数据失败），但前端已经把条目删掉了，就会出现「前端显示删了，但后端其实还在」的不一致情况
• 多用户场景容易出问题：如果有其他用户同时修改了Todo列表（比如别人新增/删除了条目），你本地删完之后，状态就和服务器最新数据脱节了

对应的代码整理：

onDelete(todo) { 
  axios.delete(`api/todos/${todo.id}`).then(res => { 
    // 复制原数组，避免直接修改state
    const updatedTodos = [...this.state.todos];
    const todoIndex = updatedTodos.indexOf(todo);
    updatedTodos.splice(todoIndex, 1);
    this.setState({ todos: updatedTodos });
  }); 
}

方案二：删除后重新GET全量Todo

这种方式的核心是「以服务器数据为唯一真理」：

• 绝对保证数据一致：不管后端删除时有没有复杂逻辑，也不管有没有其他用户操作，重新拉取的都是服务器最新的完整列表，不会有状态偏差
• 逻辑简单：不用处理本地数组的增删改查，直接用后端返回的数据覆盖state，不容易出错

缺点也很直观：

• 体验稍差：多了一次HTTP请求，用户会看到短暂的等待（如果列表大的话更明显）
• 资源浪费：明明只删了一条，却要拉取整个列表，有点没必要

代码整理：

onDelete(todo) { 
  axios.delete(`api/todos/${todo.id}`).then(() => { 
    // 删除成功后重新获取全量Todo
    axios.get('api/todos')
      .then(getRes => {
        this.setState({ todos: getRes.data });
      });
  }); 
}

该怎么选？ #

分场景来看：

1. 单用户+简单后端逻辑：选方案一，体验优先，只要你能确保后端删除一定会成功（比如已经做了前端校验，后端不会拒绝删除请求），那完全没问题
2. 多用户协作/复杂后端逻辑：选方案二，数据一致性优先，避免出现前端后端状态不一样的尴尬情况
3. 折中方案（如果后端支持）：可以让后端在DELETE请求成功后，返回删除后的最新Todo列表，或者至少返回被删除的Todo的确认信息，然后用这个返回数据来更新state——既保证了一致性，又不用拉取全量数据

内容的提问来源于stack exchange，提问作者funky-nd