在 React 中使用 Axios:GET 和 POST 请求示例

Axios 是一个基于 Promise 的 HTTP 客户端,可以简化在 React 应用程序中发出 HTTP 请求的过程。它简化了从 API 获取数据和将数据发送到服务器等任务。在本指南中,我们将通过 GET 和 POST 请求的实际示例探讨如何在 React 中使用 Axios。

在 React 中设置 Axios

要在 React 项目中开始使用 Axios:

1. 安装 Axios:

   npm install axios
   

2. 在组件中导入 Axios:

   import axios from 'axios';
   

发出 GET 请求

GET 请求从指定的端点检索数据。以下是如何在 React 组件中使用 Axios 执行 GET 请求:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function DataFetchingComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetchingComponent;

说明:

• 状态初始化: useState 将 data 初始化为一个空数组。
• 数据获取: axios.get 从 API 端点检索数据。
• Effect Hook: useEffect 确保 GET 请求在组件挂载后只运行一次。
• 错误处理: 错误被捕获并记录到控制台。

发出 POST 请求

POST 请求将数据发送到服务器以创建新资源。以下是如何在 React 组件中使用 Axios 执行 POST 请求:

import React, { useState } from 'react';
import axios from 'axios';

function CreatePostComponent() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const post = { title, body };
    axios.post('https://jsonplaceholder.typicode.com/posts', post)
      .then(response => {
        console.log('Post created:', response.data);
      })
      .catch(error => {
        console.error('Error creating post:', error);
      });
  };

  return (
    <div>
      <h1>Create Post</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Title:</label>
          <input
            type=""text""
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </div>
        <div>
          <label>Body:</label>
          <textarea
            value={body}
            onChange={(e) => setBody(e.target.value)}
          />
        </div>
        <button type=""submit"">Submit</button>
      </form>
    </div>
  );
}

export default CreatePostComponent;

说明:

• 状态初始化: useState 将 title 和 body 初始化为空字符串。
• 表单处理: 表单捕获用户输入的帖子标题和正文。
• 提交函数: handleSubmit 阻止默认的表单提交行为,构造一个 post 对象,并使用 axios.post 发送它。
• 错误处理: 错误被捕获并记录到控制台。

常见问题

在 React 中可以将 Axios 用于其他 HTTP 方法吗?

是的,Axios 支持各种 HTTP 方法,包括 PUT、DELETE 和 PATCH,可以进行全面的 CRUD 操作。

Axios 比 Fetch API 更好吗?

与原生的 Fetch API 相比,Axios 提供了更简单的 API,并自动处理 JSON 数据,可以简化代码。

在 React 中如何使用 Axios 处理请求取消?

Axios 提供了使用 `CancelToken` API 取消请求的方法,这对于防止 React 应用程序中的内存泄漏很有用。

结论

Axios 是在 React 应用程序中处理 HTTP 请求的强大工具。通过了解如何执行 GET 和 POST 请求,您可以在 React 组件中高效地与 API 交互并管理数据。