如何在React/Gatsby中实现多个Request

Question

我正在尝试对数据库实施多个请求，然后在我的 gatsby 应用程序中显示结果。

我有一个可行的解决方案，只需一个（！）请求。

const ListRezept = (props) => {

const url_id = props.params.id;
const [data, setData] = useState(null);
const [isPending, setIsPending] = useState(true);
const [error, setError] = useState(null);

 useEffect(() => {
    const abortCont = new AbortController();

    setTimeout(() => {
    fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezept?$filter=RezeptId eq '+ url_id)
       .then(res => {
          if (!res.ok) { // error coming back from server
            console.log("error");
            throw Error('Could not fetch the data for that resource!');
          } 
          return res.json();
       })
       .then(data => {
        setIsPending(false);
        setData(data.value);
        setError(null);
       })
       .catch(err => {
        if (err.name === 'AbortError') {
          console.log('fetch aborted')
        } else {
          // auto catches network / connection error
          setIsPending(false);
          setError(err.message);
        }
       });
 }, []);

     // abort the fetch
     return () => abortCont.abort();
    }, []) 
    
 ...
   
 }

现在我想集成Promise.all函数来调用多个请求。 我怎样才能做到这一点？ 在许多网站中，只有一个示例如何调用多个请求并将它们记录在控制台中。 例如https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

在我的方法中，我必须将单个请求的每个结果映射到一个变量。

在这里你可以看到我是如何开始的，但是失败了......我不知道如何处理Promise.all中的多个答案

const rezeptreq = fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezept?$filter=RezeptId eq '+ url_id);
const rezeptartreq = fetch('https://abc.4.azurestaticapps.net/data-api/rest/Rezeptart');

Promise.all([rezeptreq, rezeptartreq])
       .then(([res1, res2 ]) => {
     
          if (!res1.ok) { // error coming back from server
            console.log("error");
            throw Error('Could not fetch the data for that resource!');
          } 
          return res.json(), res2.json();

...

我必须创建一个数组吗？ 如何访问每个请求的单个结果？

Answer 1

    function MultipleRequest() {

    const abortControllerRef = useRef(null);


    useEffect(() => {
        if (!abortControllerRef.current) {
            const newAbortController = new AbortController();
            abortControllerRef.current = newAbortController;
        }

        callMultipleRequest();

        return () => {
            if (abortControllerRef.current) {
                abortControllerRef.current.abort();
            }
        };
    }, [])

    const callMultipleRequest = async () => {
        const abortController = abortControllerRef.current;
        const rezeptreq =  fetch('https://dummyjson.com/products/1', { signal: abortController.signal });
        const rezeptartreq =  fetch('https://dummyjson.com/products/1', { signal: abortController.signal });

        Promise.all([rezeptreq, rezeptartreq]).then((responseArray) => {
            responseArray.forEach(element => {
                if (!element.ok) {
                    console.log("error");
                    throw Error('Could not fetch the data for that resource!');
                }
            });
            return Promise.all(responseArray.map(res => res.json()));
        }).then((res) => {
            console.log("res => ", res);
        }).catch((err) => {
            console.error(err);
        })
    }


    return (
        <div>MultipleRequest</div>
    )
}

它使用 fetch API 向同一端点发出两个 HTTP 请求。这些请求是使用 AbortController API 发出的，该 API 允许在需要时中止请求。该组件使用 useEffect 钩子来初始化 AbortController 并在组件挂载时调用 callMultipleRequest 函数。 callMultipleRequest 函数发出 HTTP 请求并处理响应。如果任何响应不正确，则会引发错误。然后响应将记录到控制台。该组件返回一个带有文本“MultipleRequest”的元素。