React AJAX

React Axios

在 React 中使用 Axios 进行网络请求是一种常见的做法，Axios 是一个流行的第三方库，用于处理 HTTP 请求。以下是如何在React中集成和使用 Axios 的基本步骤和示例：

安装 Axios

首先，确保您的React项目已经安装了Axios。如果尚未安装，可以使用以下命令安装：

npm install axios

或者使用Yarn：

yarn add axios

在 React 组件中使用 Axios

假设您有一个React函数组件，下面是如何在组件中使用Axios来获取数据并显示在UI上的示例

import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        // 发起GET请求
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, []); // 空依赖数组确保effect只运行一次
  return (
    <div>
      <h1>Post List</h1>
      {data ? (
        <ul>
          {data.map((post) => (
            <li key={post.id}>
              <h2>{post.title}</h2>
              <p>{post.body}</p>
            </li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};
export default MyComponent;


使用说明：

  • useState: 使用useState来定义data状态，用于存储从API获取的数据。

  • useEffect: 使用useEffect钩子来处理数据获取逻辑。在这个例子中，我们使用空的依赖数组[]确保useEffect只在组件挂载时运行一次。

  • axios.get: 使用Axios的get方法发送GET请求到指定的API端点（这里使用了JSONPlaceholder的示例API）。

  • 数据处理: 获取到的数据存储在response.data中，然后更新data状态。

  • 条件渲染: 使用条件渲染来处理数据加载状态，如果data为null，则显示"Loading..."，否则显示从API获取的数据列表。


Axios 更多用法

  • POST请求: 使用axios.post(url, data)发送POST请求。

  • 拦截器: 使用Axios的拦截器可以在请求或响应被处理前拦截它们，例如，可以用来添加认证信息或者处理错误。

  • 并发请求: 使用axios.all()和axios.spread()来处理多个并发请求和它们的响应。


注意事项

  • 错误处理: 始终使用try/catch块或Promise的.catch()方法来捕获和处理请求过程中可能出现的错误。

  • 依赖数组: 在useEffect中使用依赖数组来控制何时触发数据获取逻辑，以避免不必要的重复请求。

  • 跨域请求: 如果您的API端点与前端应用不在同一域名下，可能需要处理跨域请求的问题。


Axios 提供了简单、强大和灵活的API，使得在React应用中进行网络请求变得更加方便和可控。