javascript - 如何做多个获取请求

Question

我想用 React/JavaScript 做多个获取请求，我有以下尝试哪种有效:

const fetchAll = async () => {
    Promise.all([
        await fetch('/api/...'),
        await fetch('/api/...')
    ]).then(links => {
        const response1 = links[0];
        const response2 = links[1];

        timeData = response1.json();
        functionData = response2.json();
    })
}

但我更愿意这样做，因为这样看起来更有用。如果可能的话，我想使用 useEffect 和 useState 并在 useState 的不同数组中加载不同 API 的数据。这是一个例子:

const [data, setData] = useState([]);
useEffect(() => {
        fetch("/api/..")
            .then((response) => response.json())
            .then((r) => {
                setData(r);
            });
    }, []);

有没有办法针对多个请求执行此操作并将数据保存在不同的数组中，以便我以后可以访问它们？

Answer 1

如果我没有正确理解你的问题，那么我认为你想要这样的东西:

const [resp1, setResp1] = useState();
const [resp2, setResp2] = useState();

useEffect(() => {
    Promise.all([
        fetch('/api/...'),
        fetch('/api/...')
    ]).then(links => {
        const response1 = links[0];
        const response2 = links[1];
        
        setResp1(response1);
        setResp2(response2);
    })
}, [/*dependency array*/])

在这里，我们利用 useEffect 使您的同步 fetches；我们真的不需要也不想使用 await 因为我们希望它们同时运行并且 Promise.all 只会在数组中的所有 promise 都解析时解析。在 Promse.all 的 .then 中，您可以像在原始示例中所做的那样解析响应，并将它们设置在您之前定义的状态 Hook 中你的组件。你可能想确保你有一个 appropriately-defined dependency array passed as a second arg to your useEffect ，以确保它仅在您希望它执行的条件下执行。这适用于一些有限数量的提取——对于动态的或具有非常大量提取的东西，这种方法可能不太理想，你会想要扩展性更好的东西。