当前位置：首页 > React

react公用组件如何请求接口

2026-03-11 09:54:42React

公用组件请求接口的实现方法

在React中，公用组件请求接口通常需要考虑组件的复用性、状态管理以及接口调用的封装。以下是几种常见的实现方式：

使用自定义Hook封装接口请求

自定义Hook可以封装接口请求逻辑，便于在多个组件中复用：

react公用组件如何请求接口

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

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get(url);
        setData(response.data);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

通过Props传递API调用方法

父组件可以传递API调用方法给公用组件：

react公用组件如何请求接口

function ParentComponent() {
  const fetchData = async () => {
    const response = await fetch('/api/data');
    return response.json();
  };

  return <CommonComponent fetchData={fetchData} />;
}

function CommonComponent({ fetchData }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const loadData = async () => {
      const result = await fetchData();
      setData(result);
    };
    loadData();
  }, [fetchData]);

  // 渲染逻辑...
}

使用Context共享API服务

通过Context可以全局共享API服务：

const ApiContext = React.createContext();

function ApiProvider({ children }) {
  const api = {
    get: async (url) => {
      const response = await fetch(url);
      return response.json();
    },
    post: async (url, data) => {
      // POST请求实现...
    }
  };

  return <ApiContext.Provider value={api}>{children}</ApiContext.Provider>;
}

function CommonComponent() {
  const api = useContext(ApiContext);
  const [data, setData] = useState(null);

  useEffect(() => {
    const loadData = async () => {
      const result = await api.get('/api/data');
      setData(result);
    };
    loadData();
  }, [api]);

  // 渲染逻辑...
}

使用高阶组件封装

高阶组件可以增强公用组件的API调用能力：

function withApi(WrappedComponent, apiConfig) {
  return function(props) {
    const [apiData, setApiData] = useState(null);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
      const fetchData = async () => {
        setLoading(true);
        try {
          const response = await fetch(apiConfig.url);
          const data = await response.json();
          setApiData(data);
        } finally {
          setLoading(false);
        }
      };

      fetchData();
    }, []);

    return <WrappedComponent {...props} apiData={apiData} loading={loading} />;
  };
}