React AJAX

在前端开发中，经常需要与服务器进行数据交互，获取数据并展示在页面上。在 React 中，我们通常使用 AJAX 技术来实现与服务器的数据交互。本章将介绍如何在 React 中使用 AJAX。

使用 Axios 发送 AJAX 请求

Axios 是一个流行的用于发送 AJAX 请求的第三方库，它支持在浏览器和 Node.js 环境中使用。首先，我们需要安装 Axios：

npm install axios

然后在 React 组件中引入 Axios，并发送 AJAX 请求：

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;

在上面的示例中，我们使用 Axios 发送一个 GET 请求，并在组件加载时获取数据并更新组件的状态。最后将数据展示在页面上。

使用 Fetch API 发送 AJAX 请求

除了 Axios，我们也可以使用原生的 Fetch API 来发送 AJAX 请求。Fetch API 是现代浏览器内置的用于发送网络请求的方法。

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default MyComponent;

在上面的示例中，我们使用 Fetch API 发送一个 GET 请求，并在组件加载时获取数据并更新组件的状态。最后将数据展示在页面上。

以上就是在 React 中使用 AJAX 的两种常见方式，开发者可以根据实际需求选择适合自己的方式来进行数据交互。