单击按钮时从 API 获取随机数据 - React

Question

发送请求时，在 Chrome 中重新加载页面时响应始终相同，但在 FireFox 中是随机的（应该如此）。页面重新加载后，按钮单击数据始终相同。 我想在每个按钮单击时发出请求，以在状态挂钩中存储不同的数据。

我也在vanilla js中尝试过，响应也是一样的。

是什么导致数据在请求时始终相同而不是随机的？ 我会将之前获取的数据存储在状态中，但首先必须弄清楚为什么它总是一样，我会很感激任何帮助，因为我是这些 api 调用的新手，并且也会做出反应。

App.js：

import FetchColor from './common/FetchColor';
import ColorList from './components/ColorList';
import { useEffect, useState } from 'react';

function App() {
  const [colorData, changeColor] = useState('');

  const changeColorHandler = () => {
    FetchColor(changeColor);
  };

  useEffect(() => {
    FetchColor(changeColor);
  }, []);

  return (
    <div className='App'>
      <button onClick={changeColorHandler}>
        {colorData ? colorData.tags[0].name : 'Change Color'}
      </button>
      <ColorList color={colorData} />
    </div>
  );
}

export default App;

FetchColor.js：

const FetchColor = async (changeColor) => {
  const response = await fetch('https://www.colr.org/json/color/random');
  const data = await response.json();
  const [color] = data.colors;
  changeColor(color);
};

export default FetchColor;

原版 JavaScript script.js：

const fetchButton = document.getElementById('fetch-api');

fetchButton.addEventListener('click', fetchColorFunc);

async function fetchColorFunc() {
  const response = await fetch('https://www.colr.org/json/color/random');
  console.log(`Response: ${response}`);
  const data = await response.json();
  console.log(`Data: ${data}`);
}

Answer 1

这很可能是由于缓存造成的。如果您查看开发者工具的 Chrome 网络面板中的请求，您应该会看到请求已缓存，因此始终返回相同的值。

Fetch 可选地采用包含将应用于请求的自定义设置的 init 对象，包括 cache。例如，您可以通过cache: "no-cache" 或cache: "no-store" 绕过缓存（有关详细信息和差异，请参阅documentation），您将获得每个请求的随机结果。 以下面的 sn-p 为例：

---

async function fetchColorFunc() {
  const response = await fetch('https://www.colr.org/json/color/random', { cache: "no-cache" });
  const data = await response.json();
  console.log(`Data: ${JSON.stringify(data)}`);
}

fetchColorFunc();

Answer 2

Chrome 会缓存请求。如果您打开开发人员工具并检查网络选项卡，您可以看到这一点。您会看到，所有后续调用都是从磁盘缓存中获取的。

您可以在 url 中添加一些随机查询

const response = await fetch('https://www.colr.org/json/color/random?t='+Date.now());

或者您可以添加一个cache-control 标头，其值为no-cache。

const response = await fetch('https://www.colr.org/json/color/random', { headers : {"cache-control": "no-cache"}});

但这会触发预检请求并要求服务器允许来自您的源的 CORS。