Create React App 集成后端 API

在开发 web 应用时，通常会涉及到与后端 API 进行数据交互。Create React App 提供了一种简单的方式来集成后端 API，并将数据展示在前端界面上。

使用 Axios 发起 HTTP 请求

Axios 是一个流行的 JavaScript 库，用于在浏览器和 Node.js 中发起 HTTP 请求。我们可以使用 Axios 来与后端 API 进行通信。

首先，我们需要安装 Axios：

npm install axios

然后，在 React 组件中使用 Axios 发起 GET 请求：

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('https://api.example.com/data');
      setData(response.data);
    };

    fetchData();
  }, []);

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

export default MyComponent;

在上面的示例中，我们使用 Axios 发起了一个 GET 请求，并将返回的数据展示在页面上。

使用 Fetch API 发起 HTTP 请求

除了 Axios，我们还可以使用浏览器原生的 Fetch API 来发起 HTTP 请求。Fetch API 提供了一种现代的方式来处理网络请求。

下面是一个使用 Fetch API 的示例：

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

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
    };

    fetchData();
  }, []);

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

export default MyComponent;

在这个示例中，我们使用 Fetch API 发起了一个 GET 请求，并将返回的数据展示在页面上。

通过以上示例，我们可以看到如何在 Create React App 中集成后端 API，并在前端界面上展示数据。