JavaScript에서 ReactJS 백엔드에 axios delete를 보내는 방법

Axios 삭제 보내기란 무엇인가요?

ReactJS 및 Axios를 사용하여 백엔드에서 데이터를 삭제하는 것은 어려운 작업이 될 수 있습니다. 그러나 올바른 접근 방식과 지식이 있으면 이 작업을 쉽게 수행할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 ReactJS의 백엔드에 Axios 삭제 요청을 보내는 방법을 살펴보겠습니다. 코드와 설명, 두 가지 작업 예제를 통해 두 가지 접근 방식을 살펴보겠습니다. 자, 시작해 봅시다!

알고리즘

논의를 시작하기 전에 ReactJS를 사용할 때 Axios 삭제 요청을 백엔드로 보내는 프로세스를 이해하는 것이 중요합니다. 단계는 다음과 같습니다 -

• Axios 통합 - 가짜 HTTP 청원을 위한 인기 라이브러리인 Axios를 포함해야 합니다.

• Create a 명확한 요청 - 그런 다음 Axios를 사용하여 명확한 요청을 시작합니다. 이를 위해서는 URL(Uniform Resource Locator), 헤더(있는 경우) 및 서버로 전송해야 하는 모든 데이터를 지정해야 합니다.

• 요청 보내기 - 요약하면 Axios를 사용하여 서버에 명확한 요청을 보냅니다.

방법 1: axios 삭제 방법을 사용하세요

첫 번째 방법은 Axios 삭제 방법을 사용하는 것입니다. 코드는 다음과 같습니다 -

으아악

위 코드에서는 id 매개변수를 취하는 deleteData라는 함수를 정의했습니다. 함수 내에서 axios의 삭제 메소드를 사용하여 서버에 삭제 요청을 보냅니다. 우리가 타겟팅하는 URL에는 삭제하려는 데이터를 나타내는 id 매개변수가 포함되어 있습니다. 요청이 성공하면 응답 데이터를 콘솔에 기록합니다. 오류가 발생하면 해당 오류를 콘솔에 기록합니다.

예

이 예에서는 클릭하면 데이터를 삭제하는 삭제 버튼을 만들어 보겠습니다. 코드는 다음과 같습니다 -

으아악

위 코드는 삭제 요청 URL을 작성하기 위해 id 속성을 허용하는 "DeleteButton"이라는 구성 요소를 보여줍니다. 삭제 버튼을 클릭하면 Axios 삭제 메소드를 사용하여 서버에 삭제 요청을 보내고 관련 ID를 지정하는 handlerDelete 함수가 호출됩니다. 요청이 성공하면 응답 데이터가 콘솔에 기록됩니다. 대신 오류가 발생하면 해당 오류도 콘솔에 기록됩니다.

방법 2: axios 요청 방법 사용

대안으로는 Axios 요청 프로세스와 메소드 속성의 "삭제" 속성 설정을 사용해야 합니다. 아래는 해당 코드 조각입니다 -

으아악

이 코드에서는 첫 번째 메소드와 동일한 deleteData 함수를 정의합니다. 그러나 Axios 삭제 메소드를 사용하는 대신 Axios 요청 메소드를 사용하고 메소드 속성을 "Delete"로 설정합니다. 요청이 성공하면 응답 데이터를 콘솔에 기록합니다. 오류가 발생하면 해당 오류를 콘솔에 기록합니다.

이제 코드와 설명으로 두 가지 방법을 모두 다루었으므로 ReactJS의 백엔드에 Axios 삭제 요청을 보내는 방법에 대한 두 가지 작업 예제를 살펴보겠습니다.

예: 삭제 확인 모드

이 예시에서는 확인 후 데이터를 삭제하는 삭제 확인 패턴을 생성하겠습니다. 코드는 다음과 같습니다.

으아악

출력

위의 코드에는 id 속성을 허용하는 DeleteConfirmationModal이라는 구성 요소가 포함되어 있습니다. 삭제 버튼을 클릭하면 확인 모드가 나타납니다. 사용자가 삭제를 확인하면 handlerDelete 함수가 실행됩니다. 이 함수는 axios delete 메소드를 사용하여 서버에 삭제 요청을 보내고 ID를 지정합니다. 요청이 성공하면 응답 데이터가 콘솔에 기록됩니다. 대신 오류가 발생하면 해당 오류도 콘솔에 기록됩니다. 즉, isOpen 상태가 false로 설정되어 확인 모드가 꺼집니다.

결론

이 기사에서는 JavaScript를 사용하여 ReactJS의 백엔드에 Axios 삭제 요청을 보내는 방법을 살펴보았습니다. 우리는 두 가지 작업 예제뿐만 아니라 코드와 설명이 포함된 두 가지 다른 접근 방식을 제시합니다. 이 문서에 설명된 단계를 따르면 ReactJS 및 Axios를 사용하여 백엔드에서 데이터를 쉽게 삭제할 수 있습니다.

위 내용은 JavaScript에서 ReactJS 백엔드에 axios delete를 보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!