데이터 패칭 라이브러리 - Axios (3. patch, put, delete)

eeensu·2024년 6월 29일
post-thumbnail

3개월 전 작성했던 axios 시리즈였지만 취업 이후 많이 바빴기에 많이 딜레이되었다.. 지금이라도 마무리하자...

PATCH

patch 메서드는 리소스의 '일부'를 업데이트하는 데 사용된다. 전체 리소스를 수정하지 않고, 변경할 부분만 전송하며 데이터의 조각을 수정할 수 있다.

axios.patch(url, updatedData, config)
  .then(response => {
    // 성공적으로 데이터를 가져온 경우의 처리
    console.log(response.data);
  })
  .catch(error => {
    // 요청이 실패한 경우의 처리
    console.error('Error fetching data:', error);
  });

매개변수

  • url
    요청을 보낼 URL이다. 수정해야할 데이터(api)의 앤드포인트에 특정한 파라미터를 지정해야할 수도 있다.
    ex) https://api.example.com/users/${userId}
  • updatedData
    분적으로 업데이트할 사용자 데이터 객체이다. 예를 들어, { firstName: 'Jane' } 을 대입한다.
  • config (optional)
    요청을 구성하는 설정 객체이다.


PUT

PUT 메서드는 리소스를 완전히 업데이트하는 데 사용되며 주어진 리소스를 새로운 데이터로 대체한다.

 axios.put(url, updatedData, config)
    .then(response => {
      // 성공적으로 데이터를 업데이트한 경우의 처리
      console.log(response.data);
    })
    .catch(error => {
      // 요청이 실패한 경우의 처리
      console.error('Error updating user:', error);
    });
  • url
    요청을 보낼 URL이다. 수정해야할 데이터(api)의 앤드포인트에 특정한 파라미터를 지정해야할 수도 있다.

  • updatedData
    전체적으로 업데이트할 사용자 데이터 객체이다. 전체적인 데이터의 업데이트이므로 모든 부분 데이터가 포함되어야 한다.
    ex) { firstName: 'Jane', lastName: 'Doe', email: 'jane.doe@example.com' }.

  • config (optional)
    요청을 구성하는 설정 객체이다.



DELETE

DELETE 메서드는 리소스를 삭제하는 데 사용된다.

axios.delete(url, config)
    .then(response => {
      // 성공적으로 데이터를 삭제한 경우의 처리
      console.log('User deleted:', response.data);
    })
    .catch(error => {
      // 요청이 실패한 경우의 처리
      console.error('Error deleting user:', error);
    });
  • url
    요청을 보낼 URL이다. 수정해야할 데이터(api)의 앤드포인트에 특정한 파라미터를 지정해야할 수도 있다.

  • config (optional)
    요청을 구성하는 설정 객체


이 형식을 사용하면 Axios의 다양한 HTTP 메서드를 일관된 방식으로 사용할 수 있다. 요청이 성공하면 response.data를 통해 응답 데이터를 처리하고, 요청이 실패하면 error 객체를 통해 오류를 처리한다.

profile
안녕하세요! 프론트엔드 개발자입니다! (2024/03 ~)

0개의 댓글