Как вызвать HTTP delete с помощью axios в React

В своей предыдущей статье я рассказал об использовании axios в react. В этой статье мы рассмотрим, как вызвать API удаления из приложения react с помощью axios.

Содержание

Настройка проекта
Удаление с помощью axios
Удаление с помощью async await
Передача заголовка при удалении
Обработка ошибок при вызове API удаления

Настройка проекта

Сначала создайте приложение react с помощью следующей команды:

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

Войти в полноэкранный режим Выйти из полноэкранного режима

Удаление с помощью axios

Для демонстрации функциональности удаления мы будем использовать API JSONPlaceholder.

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!")
    })
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Обработка ошибок при вызове 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)
  }
}

Войти в полноэкранный режим Выход из полноэкранного режима