调用服务接口

调用时机

1. 初始化事件
2. 用户事件

初始化事件调用

需要用到react的钩子函数useEffect,通常还会配合另外一个钩子函数useState一起使用。

示例：

function C001() {
    const [data, setdata] = useState<R1>(null);
    useEffect(() => {
        void (async () => {
            const res = await fetch(s001, { method: 'POST', body: JSON.stringify({ foo: 'bar' }) });
            const data = await res.json() as R1;
            setdata(data);
        })();
    }, []);
    return <>
        <pre>{JSON.stringify(data)}</pre>
    </>;
}

用户事件调用

在react组件的事件中调用服务，通常也会配合使用钩子函数useState。

示例：

function C001() {
    const [data, setdata] = useState<R1>(null);
    async function handler() {
        const res = await fetch(s001, { method: 'POST', body: JSON.stringify({ foo: 'bar' }) });
        const data = await res.json() as R1;
        setdata(data);
    }
    return <>
        <button onClick={handler}>click me</button>
        <pre>{JSON.stringify(data)}</pre>
    </>;
}