axios 在调用时不断运行

Posted 2023-04-15

【中文标题】axios 在调用时不断运行

【英文标题】：axios get run constantly when call

【发布时间】：2021-11-29 17:24:17

【问题描述】：

我创建 app.get 以从 Spotify 返回令牌

这里是代码：

 axios(
    url: "https://accounts.spotify.com/api/token",
    method: "POST",
    headers: 
      Authorization:
        "Basic " +
        Buffer.from(clientId + ":" + clientSecret).toString("base64"),
      "Content-Type": "application/x-www-form-urlencoded",
    ,
    params: 
      grant_type: "refresh_token",
      refresh_token: refreshToken,
    ,
  )
    .then((response) => 
      res.json(
        accessToken: response.data.access_token,
        expiresIn: response.data.expires_in,
      );
    )
    .catch((error) => console.log(error.statusCode));
);

每当我调用客户端的一个函数时，它都会返回令牌，但是当我在控制台记录下面的代码时，它会不停地打印出来

这里是代码：

let getData = () => 
    axios.request("http://localhost:3001/refresh_token").then((response) => 
      SetToken(response.data);
      setExpires(response.data.expiresIn);
      console.log(token);
    );
  ;

  useEffect(() => 
    const data = setInterval(() => 
      getData();
    , 1000);
  );

  return (
    <div className="spotify">
      <button
        onClick=() => 
          getData();
        
      >
        click
      </button>
    </div>
  );

谢谢

【参考方案1】：

你的useEffect 缺少一个依赖数组，所以每次重新渲染你的组件时都会调用它（更糟糕的是，它会创建一个新的间隔超时，每次都不会清除）。我会勇敢地假设 setToken 和 setExpires 是组件的状态设置器，所以它们会导致重新渲染。

你需要

useEffect(() => 
  const dataTimer = setInterval(() => 
    getData();
  , 1000);
  return () => clearInterval(dataTimer);
, []); // <- this empty dependency array

所以它只会在你的组件挂载时被调用一次，所以当它卸载时间隔会被清理。

(getData 也应该在那个依赖数组中，但是由于您似乎没有使用useCallback 来记忆它，这将否定空数组的好处，因为getData 的身份也会发生变化在每次渲染时...）

【讨论】：

谢谢回复，我想调用getData();在页面加载时获取令牌，然后间隔开始，但是当我像这样useEffect(() => getData(); const data = setInterval(() => getData(); , (expiresIn - 60) * 1000); return () => clearInterval(data); , [getData]); 编码时，我又回到了同样的错误