构建可避免无限循环的React自定义API Hook：管理加载状态的最佳实践

import { useState } from "react";

/**
 * 自定义API Hook，用于封装HTTP请求逻辑和加载状态管理。
 *
 * @param {object} options - 配置对象。
 * @param {string} options.method - HTTP方法 (例如: 'get', 'post')。
 * @param {string} options.url - API请求的基础URL。
 * @returns {[boolean, Function]} - 返回一个数组，包含当前加载状态和用于触发API请求的函数。
 */
export default function useApi({ method, url }) {
    // 初始加载状态设置为false，因为API请求通常由事件触发，而非组件挂载时立即执行
    const [loading, setLoading] = useState(false);

    // 定义支持的HTTP方法及其对应的请求逻辑
    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(responseData => {
                    // 无论数据是否有效，请求已完成，设置加载状态为false
                    setLoading(false); 
                    if (!responseData) {
                        return reject(new Error("API响应数据为空"));
                    }
                    resolve(responseData);
                })
                .catch(error => {
                    setLoading(false); // 请求失败时，设置加载状态为false
                    console.error("API GET 请求失败:", 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(responseData => {
                    // 无论数据是否有效，请求已完成，设置加载状态为false
                    setLoading(false); 
                    if (!responseData) {
                        return reject(new Error("API响应数据为空"));
                    }
                    resolve(responseData);
                })
                .catch(error => {
                    setLoading(false); // 请求失败时，设置加载状态为false
                    console.error("API POST 请求失败:", error);
                    reject(error); // 抛出错误，以便组件可以捕获处理
                });
            });
        }
    };

    // 验证传入的HTTP方法是否有效
    if (!(method in methods)) {
        throw new Error(`useApi()：无效的HTTP方法 '${method}'。支持的方法有: ${Object.keys(methods).join(', ')}`);
    }

    // 返回加载状态和对应的API请求函数
    return [loading, methods[method]];
}