优化React自定义useApi Hook：实现事件驱动的加载状态管理

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); // API请求开始前，设置loading为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 => { // 使用 responseData 避免与外部 data 混淆
                    if (!responseData) {
                        setLoading(false); // 请求失败或无数据时，重置loading
                        return reject(responseData);
                    }
                    setLoading(false); // 请求成功，重置loading
                    resolve(responseData);
                })
                .catch(error => {
                    setLoading(false); // 请求出错，重置loading
                    console.error(error);
                    reject(error); // 确保错误被传递
                });
            });
        },
        post: function (data = {}) {
            return new Promise((resolve, reject) => {
                setLoading(true); // API请求开始前，设置loading为true
                fetch(url, {
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json",
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(responseData => {
                    if (!responseData) {
                        setLoading(false); // 请求失败或无数据时，重置loading
                        return reject(responseData);
                    }
                    setLoading(false); // 请求成功，重置loading
                    resolve(responseData);
                })
                .catch(error => {
                    setLoading(false); // 请求出错，重置loading
                    console.error(error);
                    reject(error); // 确保错误被传递
                });
            });
        }
    };

    if (!(method in methods)) {
        throw new Error("Incorrect useApi() first parameter 'method'");
    }

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

import React, { useState } from 'react';
import useApi from './useApi'; // 假设useApi.js在当前目录

function MyFormComponent() {
    const [formData, setFormData] = useState({ name: '', email: '' });
    const [loading, postData] = useApi({ method: 'post', url: 'https://api.example.com/users' }); // 替换为你的实际API URL
    const [message, setMessage] = useState('');

    const handleChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setMessage('');
        try {
            const result = await postData(formData); // 调用useApi返回的postData函数
            setMessage('数据提交成功！' + JSON.stringify(result));
            setFormData({ name: '', email: '' }); // 清空表单
        } catch (error) {
            setMessage('数据提交失败: ' + error.message);
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">姓名:</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    disabled={loading} // 在加载时禁用输入
                />
            </div>
            <div>
                <label htmlFor="email">邮箱:</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    disabled={loading}
                />
            </div>
            <button type="submit" disabled={loading}>
                {loading ? '提交中...' : '提交'}
            </button>
            {message && <p>{message}</p>}
        </form>
    );
}

export default MyFormComponent;