一个 fetch 请求在服务器上创建许多 GET 请求答案

【问题标题】：One fetch request creates many GET requests on server一个 fetch 请求在服务器上创建许多 GET 请求
【发布时间】：2021-11-11 02:39:56
【问题描述】：

这是我的代码：

import React from "react";
import { useState, useEffect } from "react";
import TutorialList from "./TutorialList";
import PropTypes from "prop-types";

const Home = () => {
  const [tutorials, setTutorials] = useState(null);

  useEffect(() => {
    console.log("Fetching data");
    fetch("http://192.168.212.52:8080/api/tutorials/all/")
      .then((res) => {
        return res.json();
        console.log("Getting json from response");
      })
      .then((data) => {
        console.log(data);
        setTutorials(data);
      });
  }, []);

  return (
    <div className="home">
      {console.log(tutorials)}
      {tutorials && (
        <TutorialList tutorials={tutorials} title={"All tutorials"} />
      )}
    </div>
  );
};
Home.propTypes = {
  title: PropTypes.string,
};
export default Home;

我希望这会向服务器发出 1 个获取请求，服务器会返回数据然后用 react 渲染。

它实际上所做的是使超过 10 向服务器发出请求，在所有请求后仍呈现数据结束。我可以从服务器日志和浏览器中看到请求网络开发工具。

但是，Fetching data 和 Getting json from response 日志只执行一次，正如预期的那样。

【问题讨论】：

很明显，您的真实代码必须不同，因为您声称 "Getting json from response" 已被完全记录 - 该代码永远不会记录该代码
其他请求是什么？它们是来自加载到浏览器中的新页面的资源吗？
此外，您的代码似乎可能存在异步设计问题，因为您在 return() 之前执行了 fetch() 并期望返回的数据包含异步操作的结果（其中将不可用）。
@Bravo 抱歉，我把return 和console.log("Getting json from response") 颠倒了。在真正的代码中是相反的，所以console.log()首先运行

标签： javascript node.js reactjs express fetch

【解决方案1】：

由于fetch 从网络请求资源，它异步运行。这就是说，如果你想在useEffect 中运行它，那么如果你将它包装在async function 中它应该可以工作。但是，请记住，这不是这个钩子本身async 的参数，而是您在其中定义的另一个函数。例如，

useEffect(() => {
    console.log("Fetching data");
    async function retrieveData() {
      const json = await fetch("http://192.168.212.52:8080/api/tutorials/all/")
      const data = await response.json()
      setTutorials(data)
      console.log("Got json from response");
    }
    retrieveData()
  }, []);

【讨论】：

功能与 OP 的代码相同