如何从 API React 获取数据

在React应用程序中，我们通常需要从后台获取数据并在UI中呈现它。这里我们将讨论如何从API React获取数据。

使用Fetch API获取数据

Fetch API提供了对网络请求和数据接收的更简单、更现代的方式。我们可以使用fetch()函数来向API发送请求并获得响应。

下面是一个使用Fetch API从API React获取数据的简单示例：

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

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

  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

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

export default App;

在这个示例中，我们使用了React的useState和useEffect钩子来存储并渲染从API读取的数据。我们使用了fetch()函数发出一个GET请求并将其提供的响应解析为JSON格式。

注意，我们使用了空数组作为effect的第二个参数，这意味着只有当组件首次加载时才会发送请求。

使用Axios获取数据

除了Fetch API，我们还可以使用许多第三方库来发送AJAX请求。其中最受欢迎的是Axios。Axios支持许多现代浏览器和Node.js，可以用于发送GET、POST、PUT、DELETE等类型的请求。

以下是从API React获取数据的Axios示例代码：

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

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

  useEffect(() => {
    axios.get('/api/data')
      .then(response => setData(response.data));
  }, []);

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

export default App;

在这个示例中，我们使用了React的useState和useEffect钩子来存储并渲染从API读取的数据。我们使用Axios库发送一个GET请求，并将response.data传递给useState的setData函数。

总结

在这篇文章中，我们讨论了如何从API React获取数据。我们使用Fetch API和Axios两种方式获取数据。如果您需要发送AJAX请求并处理响应，请使用这些方法中的任何一个方法。