React에서 axios를 사용하여 HTTP 삭제를 호출하는 방법

이전 기사에서 using axios in react에 대해 설명했습니다. 이 기사에서는 axios를 사용하여 반응 애플리케이션에서 삭제 API를 호출하는 방법을 알아봅니다.

프로젝트 설정

먼저 다음 명령을 사용하여 반응 앱을 만듭니다.

npx create-react-app react-axios-delete

이제 다음 명령을 사용하여 axios을 설치합니다.

npm i axios

App.js에서 삭제 버튼을 추가하고 아래와 같이 핸들러를 바인딩합니다.

function App() {
  const deleteHandler = () => {}

  return (
    <div>
      <button onClick={deleteHandler}>Delete</button>
    </div>
  )
}

export default App

축을 사용하여 삭제

삭제 기능을 시연하기 위해 JSONPlaceholder API을 사용할 것입니다.

import axios from "axios"

function App() {
  const deleteHandler = () => {
    axios
      .delete("https://jsonplaceholder.typicode.com/posts/1")
      .then(response => {
        console.log("deleted successfully!")
      })
  }

  return (
    <div>
      <button onClick={deleteHandler}>Delete</button>
    </div>
  )
}

export default App

위와 같이 삭제 API를 호출할 수 있습니다.

async await를 사용하여 삭제

async await 구문을 사용하려면 다음 코드를 사용할 수 있습니다.

const deleteHandler = async () => {
  const response = await axios.delete(
    "https://jsonplaceholder.typicode.com/posts/1"
  )
  console.log("deleted successfully!")
}

삭제하는 동안 헤더 전달

삭제 요청에 헤더를 전달해야 하는 경우 아래와 같이 수행할 수 있습니다.

const deleteHandler = () => {
  const headers = { foo: "bar" }
  axios
    .delete("https://jsonplaceholder.typicode.com/posts/1", { headers })
    .then(response => {
      console.log("deleted successfully!")
    })
}

delete API를 호출하는 오류 처리

catch 콜백을 추가하여 오류를 처리할 수 있습니다.

const deleteHandler = () => {
  const headers = { foo: "bar" }
  axios
    .delete("https://jsonplaceholder.typicode.com/posts/1", { headers })
    .then(response => {
      console.log("deleted successfully!")
    })
    .catch(error => {
      console.log("Something went wrong", error)
    })
}

async-await 구문을 사용하는 경우 try-catch 블록 내에서 코드를 래핑할 수 있습니다.

const deleteHandler = async () => {
  try {
    const response = await axios.delete(
      "https://jsonplaceholder.typicode.com/posts/1"
    )
    console.log("deleted successfully!")
  } catch (error) {
    console.log("Something went wrong", error)
  }
}