React Axios 删除请求示例

17 Mar 2025 | 阅读 2 分钟

在本节中，我们将了解 react axios 的删除请求。我们将使用 react js 学习 http 删除请求。假设我们想使用 axios react 发送 http 删除请求。在这种情况下，我们必须按照分步过程在 react 中发送和删除请求，这将在给定的示例中进行描述。

React 是一个 JavaScript 库。它可以构建界面。当页面呈现时，有时需要通过 React JavaScript 框架（如 Angular 和 React）重新验证数据。之后，将在各种外部服务和前端和后端之间进行许多请求。使用 axios，我们可以使用默认值、拦截器和实例保持 D.R.Y。复杂的应用程序使用 axios，这些应用程序经常进行 API 请求。不同的 API 可以创建单独的实例。为了处理全局错误，我们可以设置拦截器。对于常见标头，可以取消设置或设置默认值。axios 提供了更多功能。这些功能对于使用 React 的应用程序很有用。

Axios 是一种 nmp 包，用于从我们的应用程序发送 http 请求。“jsonplaceholder” 的 API 使用 axios 包来删除数据，我们将在示例中使用此 API。当我们使用 Web 访问资源时，此过程不是瞬时的。JavaScript 包含 promise API。当我们想要执行异步任务时，这些 promises 将非常有用。异步任务对于按顺序执行操作非常有用。这意味着它不会改变任何事情的发生。

示例

import React from 'react';
  
import axios from 'axios';
  
export default class PostList extends React.Component {
  state = {
    posts: []
  }
  
  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/posts`)
      .then(res => {
        const posts = res.data;
        this.setState({ posts });
      })
  }
  
  deleteRow(id, e){
    axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
  
        const posts = this.state.posts.filter(item => item.id !== id);
        this.setState({ posts });
      })
  
  }
  
  render() {
    return (
      <div>
        <h1> Example of React Axios Delete Request </h1>
  
        <table className="table table-bordered">
            <thead>
              <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Body</th>
                  <th>Action</th>
              </tr>
            </thead>
  
            <tbody>
              {this.state.posts.map((post) => (
                <tr>
                  <td>{post.id}</td>
                  <td>{post.title}</td>
                  <td>{post.body}</td>
                  <td>
                    <button className="btn btn-danger" onClick={(e) => this.deleteRow(post.id, e)}>Delete</button>
                  </td>
                </tr>
              ))}
            </tbody>
  
        </table>
      </div>
    )
  }
}

执行完上面的代码后，我们将看到以下输出