乐观更新与保守更新

以删除一个帖子为例，保守更新的做法是先像服务器发出请求，等到收到回复请求成功后再在前端删除对应的帖子。但这种做法会使得页面有较大的延时感。

保守更新（Pessimistic Update）：

handleDelete = async (post) => {
  await axios.delete(apiEndPoint + '/' + post.id);
  const posts = this.state.posts.filter(p => p.id !== post.id);
  this.setState({posts});
};

乐观更新则是先更改了前端页面，再像服务器发送请求，如果成功则结束操作，如果不成功，则页面回滚到先前状态。

乐观更新（Optimistic Update）：

handleDelete = async (post) => {
  const originalPosts = this.state.posts;
  const posts = this.state.posts.filter(p => p.id !== post.id);
  this.setState({posts});

  try {
    await axios.delete(apiEndPoint + '/' + post.id);
  } 
  catch (ex) {
    alert('删除帖子出错');
    this.setState({posts: originalPosts});
  }
};

对于请求服务器过程中可能发生的错误，我们可以做个判断：

handleDelete = async (post) => {
  const originalPosts = this.state.posts;
  const posts = this.state.posts.filter(p => p.id !== post.id);
  this.setState({posts});

  try {
    await axios.delete(apiEndPoint + '/' + post.id);
  } 
  catch (ex) {
    if (ex.response && ex.response.status === 404) {
      alert('该帖子不存在')
    } else {
      alert('出现一个未知错误');
      console.log(ex);
    }
    this.setState({posts: originalPosts});
  }
};