如何执行多个提取请求

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();
    })
}

但是我想这样做，因为这似乎更有用。如果可能的话，我想在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*/])

在这里，我们利用 useffect 使您的同时 fetch es eS;我们真的不需要也不需要使用等待，因为我们希望它们同时运行，并且 Promise.All 才能在数组中的所有承诺解决时才能解决。在。您的组件。您可能想确保您有一个 useffect ，以确保仅在您想要的条件下执行它。这将适用于一些有限数量的获取 - 对于动态的东西或大量的提取物，这种方法可能不太理想，并且您想要的东西可以更好。

Answer 2

可以通过

1. 创建一个URL数组来解决
2. 迭代返回的数组数据
3. 将数据传递到设置器中

，在某些模块

// fetch-helpers.js

// performs a request and resolves with JSON
export const fetchJson = async (url, init = {}) => {
  const res = await fetch(url, init);
  if (!res.ok) {
    throw new Error(`${res.status}: ${await res.text()}`);
  }
  return res.json();
};

// get JSON from multiple URLs and pass to setters
export const fetchAndSetAll = async (collection) => {
  // fetch all data first
  const allData = await Promise.all(
    collection.map(({ url, init }) => fetchJson(url, init))
  );

  // iterate setters and pass in data
  collection.forEach(({ setter }, i) => {
    setter(allData[i]);
  });
};

和组件中创建一些辅助功能...

import { useEffect, useState } from "react";
import { fetchAndSetAll } from "./fetch-helpers";

export const MyComponent = () => {
  // initialise state to match the API response data types
  const [timeData, setTimeData] = useState([]);
  const [functionData, setFunctionData] = useState([]);

  useEffect(() => {
    fetchAndSetAll([
      {
        url: "/api/...",
        setter: setTimeData,
      },
      {
        url: "/api/...",
        setter: setFunctionData,
      },
    ]).catch(console.error);
  }, []);

  return <>{/* ... */}</>;
};

Answer 3

尝试此尝试，

截至今天，现在在所有最新版本的主要浏览器中实现了Fetch，除了 IE11 外，包装器仍然可以有用，除非您对其使用多填充。

然后，利用新的且现在更稳定的JavaScript功能，例如破坏 and async/等待，您可能能够对同一问题使用类似的解决方案（请参阅代码以下）。

我相信，即使一见钟情似乎似乎有些代码，但实际上是一种更清洁的方法。希望它有帮助。

try {
  let [items, contactlist, itemgroup] = await Promise.all([
    fetch("http://localhost:3000/items/get"),
    fetch("http://localhost:3000/contactlist/get"),
    fetch("http://localhost:3000/itemgroup/get")
  ]);

  ReactDOM.render(
    <Test items={items} contactlist={contactlist} itemgroup={itemgroup} />,
      document.getElementById('overview');
  );
}
catch(err) {
  console.log(err);
};