当前位置：首页 > React

react如何在model层写函数调接口

2026-01-26 07:51:40React

React 中 Model 层函数调用接口的实现

在 React 应用中，Model 层通常负责数据管理和接口调用。可以通过以下方式组织代码：

创建独立的 API 服务模块

将接口调用封装在单独的 service 文件中，例如 apiService.js：

import axios from 'axios';

const BASE_URL = 'https://api.example.com';

export const fetchUserData = async (userId) => {
  try {
    const response = await axios.get(`${BASE_URL}/users/${userId}`);
    return response.data;
  } catch (error) {
    console.error('Error fetching user data:', error);
    throw error;
  }
};

export const updateUserData = async (userId, data) => {
  try {
    const response = await axios.put(`${BASE_URL}/users/${userId}`, data);
    return response.data;
  } catch (error) {
    console.error('Error updating user data:', error);
    throw error;
  }
};

使用自定义 Hook 封装业务逻辑

创建自定义 Hook 来组合多个接口调用：

import { useState, useEffect } from 'react';
import { fetchUserData, updateUserData } from './apiService';

export const useUserModel = (userId) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const loadUser = async () => {
    setLoading(true);
    try {
      const data = await fetchUserData(userId);
      setUser(data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  const saveUser = async (userData) => {
    setLoading(true);
    try {
      const updatedUser = await updateUserData(userId, userData);
      setUser(updatedUser);
    } catch (err) {
      setError(err);
      throw err;
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadUser();
  }, [userId]);

  return { user, loading, error, saveUser };
};

在组件中使用 Model 层

组件只需调用 Hook 而不需关心具体实现：

import { useUserModel } from './models/useUserModel';

function UserProfile({ userId }) {
  const { user, loading, error, saveUser } = useUserModel(userId);

  const handleSave = async (formData) => {
    try {
      await saveUser(formData);
      // 处理保存成功后的逻辑
    } catch (err) {
      // 处理错误
    }
  };

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

  return (
    <div>
      {/* 渲染用户界面 */}
    </div>
  );
}

使用状态管理工具集成

如果需要全局状态管理，可以将 Model 层与 Redux 或 Context API 结合：

// 在 Redux 的 async thunk 中调用接口
export const fetchUser = createAsyncThunk(
  'user/fetch',
  async (userId, { rejectWithValue }) => {
    try {
      return await fetchUserData(userId);
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);

// 在 slice 中处理状态
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, loading: false, error: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.loading = true;
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.data = action.payload;
        state.loading = false;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.error = action.payload;
        state.loading = false;
      });
  }
});