当前位置：首页 > React

react如何提供接口

2026-03-31 01:31:48React

在 React 中提供接口的方式

React 本身是一个前端库，通常不直接作为后端接口的提供者。但可以通过以下方式实现接口的交互或模拟：

使用 `fetch` 或 `axios` 调用后端接口

React 组件可以通过 HTTP 客户端（如 fetch 或 axios）与后端 API 交互：

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

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

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

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

通过 Express 或其他后端框架提供接口

如果需要从 React 应用的同源服务器提供接口，可以结合后端框架（如 Express）：

创建 Express 服务器：

react如何提供接口

const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
  res.json({ message: 'Data from backend' });
});
app.listen(3001, () => console.log('Server running on port 3001'));

React 组件调用该接口：

fetch('http://localhost:3001/api/data')
  .then(res => res.json())
  .then(data => console.log(data));

使用 Mock 数据模拟接口

开发阶段可通过 Mock 数据模拟接口响应：

// 在组件中直接模拟
const mockData = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
];

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

或使用库如 json-server 快速搭建模拟 API：

react如何提供接口

安装并启动 json-server：

npm install -g json-server
json-server --watch db.json --port 3001

React 调用模拟接口：

fetch('http://localhost:3001/posts')
  .then(res => res.json())
  .then(data => console.log(data));

通过自定义 Hook 封装接口逻辑

将接口调用逻辑封装为可复用的 Hook：

function useApi(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url]);
  return data;
}

// 使用示例
function ApiHookExample() {
  const data = useApi('https://api.example.com/data');
  return <div>{data && data.message}</div>;
}