낙관적 쇄신과 보수적 쇄신

1385 단어
게시물을 삭제하는 경우 업데이트를 지키는 방법은 서버처럼 요청을 보내고 응답 요청이 성공하면 전방에서 해당 게시물을 삭제하는 것이다.그러나 이런 방법은 페이지를 비교적 큰 시간 지연감을 갖게 할 것이다.
보수 업데이트(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});
  }
};

좋은 웹페이지 즐겨찾기