React自定义Hook实现API请求：优雅管理加载状态与避免无限循环

import { useState } from "react";

export default function useApi({ method, url }) {
    // 初始加载状态设置为false，适用于事件触发的API调用
    const [loading, setLoading] = useState(false);

    const methods = {
        get: function (data = {}) {
            return new Promise((resolve, reject) => {
                setLoading(true); // 请求开始时设置为true
                const params = new URLSearchParams(data);
                const queryString = params.toString();
                const fetchUrl = url + (queryString ? "?" + queryString : "");

                fetch(fetchUrl, {
                    method: "get",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                    },
                })
                .then(response => response.json())
                .then(data => {
                    // 无论成功与否，请求结束后都设置为false
                    setLoading(false);
                    if (!data) {
                        return reject(data);
                    }
                    resolve(data);
                })
                .catch(error => {
                    setLoading(false); // 错误发生时也设置为false
                    console.error(error);
                    reject(error); // 将错误传递出去
                });
            });
        },
        post: function (data = {}) {
            return new Promise((resolve, reject) => {
                setLoading(true); // 请求开始时设置为true
                fetch(url, {
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(data => {
                    setLoading(false); // 请求结束后设置为false
                    if (!data) {
                        return reject(data);
                    }
                    resolve(data);
                })
                .catch(error => {
                    setLoading(false); // 错误发生时也设置为false
                    console.error(error);
                    reject(error); // 将错误传递出去
                });
            });
        }
    };

    if (!(method in methods)) {
        throw new Error(`useApi() hook: Invalid method parameter "${method}". Expected one of: ${Object.keys(methods).join(', ')}`);
    }

    return [loading, methods[method]];
}

import React, { useState, useEffect } from 'react';
import useApi from './useApi'; // 假设useApi在同一目录下

function UserProfile({ userId }) {
    const [userData, setUserData] = useState(null);
    // 针对获取用户数据创建useApi实例
    const [fetchUserLoading, fetchUser] = useApi({ method: 'get', url: `/users/${userId}` });
    // 针对更新用户数据创建useApi实例
    const [updateUserLoading, updateUser] = useApi({ method: 'post', url: `/users/${userId}` });

    // 示例1: 组件加载时自动获取数据
    useEffect(() => {
        const loadUser = async () => {
            try {
                const data = await fetchUser(); // 调用useApi返回的函数
                setUserData(data);
            } catch (error) {
                console.error("Failed to fetch user:", error);
            }
        };
        loadUser();
    }, [fetchUser, userId]); // 确保fetchUser函数在依赖项中，userId变化时重新加载

    // 示例2: 用户点击按钮更新数据
    const handleUpdateProfile = async () => {
        const updatedData = { name: "New Name", email: "new@example.com" };
        try {
            const response = await updateUser(updatedData); // 调用useApi返回的函数
            setUserData(response); // 更新本地状态
            alert('Profile updated successfully!');
        } catch (error) {
            console.error("Failed to update user:", error);
            alert('Failed to update profile.');
        }
    };

    if (fetchUserLoading) {
        return <div>Loading user profile...</div>;
    }

    if (!userData) {
        return <div>No user data found.</div>;
    }

    return (
        <div>
            <h1>User Profile</h1>
            <p>Name: {userData.name}</p>
            <p>Email: {userData.email}</p>
            <button onClick={handleUpdateProfile} disabled={updateUserLoading}>
                {updateUserLoading ? 'Updating...' : 'Update Profile'}
            </button>
        </div>
    );
}

export default UserProfile;