当前位置：首页 > React

react 如何与db交互

2026-01-24 10:37:32React

使用 RESTful API 交互

在 React 中与数据库交互的常见方式是通过 RESTful API。React 应用通过 HTTP 请求（如 fetch 或 axios）与后端服务通信，后端服务负责直接操作数据库。

import axios from 'axios';

// 获取数据
const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 发送数据
const postData = async (data) => {
  try {
    const response = await axios.post('https://api.example.com/data', data);
    console.log(response.data);
  } catch (error) {
    console.error('Error posting data:', error);
  }
};

使用 GraphQL 交互

GraphQL 是另一种与数据库交互的方式，允许前端精确请求所需的数据。React 应用可以使用 Apollo Client 或 Relay 等库与 GraphQL API 通信。

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://api.example.com/graphql',
  cache: new InMemoryCache(),
});

// 查询数据
const fetchData = async () => {
  try {
    const { data } = await client.query({
      query: gql`
        query {
          posts {
            id
            title
          }
        }
      `,
    });
    console.log(data.posts);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

使用 WebSockets 实时交互

对于需要实时更新的应用，可以通过 WebSockets 与数据库交互。React 应用可以使用 socket.io-client 或其他 WebSocket 库。

import io from 'socket.io-client';

const socket = io('https://api.example.com');

// 监听数据更新
socket.on('dataUpdate', (data) => {
  console.log('Received updated data:', data);
});

// 发送数据
const sendData = (data) => {
  socket.emit('updateData', data);
};

使用 ORM 或数据库 SDK

某些数据库（如 Firebase）提供前端 SDK，允许 React 应用直接与数据库交互，无需后端 API。

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, onValue } from 'firebase/database';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  databaseURL: 'https://your-database.firebaseio.com',
};

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

// 监听数据库变化
const fetchData = () => {
  const dataRef = ref(database, 'path/to/data');
  onValue(dataRef, (snapshot) => {
    console.log('Data:', snapshot.val());
  });
};

使用 Serverless Functions

对于无后端架构，可以通过 Serverless Functions（如 AWS Lambda 或 Vercel Edge Functions）与数据库交互。

// React 中调用 Serverless Function
const fetchData = async () => {
  try {
    const response = await fetch('/api/getData');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

使用 ORM 框架（如 Prisma）

如果 React 应用通过 Next.js 等全栈框架开发，可以在 API 路由中使用 ORM 框架（如 Prisma）直接操作数据库。

// pages/api/data.js (Next.js API 路由)
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req, res) {
  const data = await prisma.data.findMany();
  res.status(200).json(data);
}