React学习04-React_Ajax

在React中，我们通常使用第三方库如axios或fetch API来处理AJAX请求。以下是使用axios的一个例子：

首先，安装axios：

npm install axios

然后，你可以在你的React组件中这样使用它：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function MyComponent() {
  const [data, setData] = useState(null);
 
  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data: ', error);
      });
  }, []);
 
  if (!data) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}
 
export default MyComponent;

在这个例子中，我们使用了React的函数组件和钩子（hooks），其中useState用于状态管理，useEffect用于处理副作用（如数据获取）。当组件挂载时，useEffect将会执行，并发送一个GET请求到指定的API。成功获取数据后，我们使用setData来更新组件的状态，并在组件中渲染数据。如果请求失败，我们将错误信息打印到控制台。