react如何接接口

React 中接入接口的常见方法

使用 fetch API 发起 HTTP 请求
fetch 是浏览器原生支持的 API，无需额外安装库。发起 GET 请求的示例代码如下：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

使用 axios 库进行请求
axios 是流行的 HTTP 客户端，提供更简洁的 API 和更好的错误处理。安装后使用：

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

在 useEffect 中调用接口
React 函数组件中通常在 useEffect 钩子中发起异步请求，避免直接放在渲染函数中：

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

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

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

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

处理加载和错误状态
完整的接口调用应包含加载状态和错误处理：

const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
  axios.get('https://api.example.com/data')
    .then(response => {
      setData(response.data);
      setLoading(false);
    })
    .catch(err => {
      setError(err.message);
      setLoading(false);
    });
}, []);

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;

使用自定义 Hook 封装请求逻辑
将接口调用逻辑封装成可复用的自定义 Hook：

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 使用示例
function MyComponent() {
  const { data, loading } = useApi('https://api.example.com/data');
  // ...
}

POST 请求示例
发送 POST 请求时需指定方法和请求体：

axios.post('https://api.example.com/data', {
  name: 'New Item',
  value: 123
})
.then(response => console.log(response.data));

处理 CORS 问题
如果接口存在跨域问题，需在后端配置 CORS 或通过代理解决。开发时可配置 package.json 添加代理：

"proxy": "http://localhost:5000"