javascript - 为什么我的 API 调用会收到重复的数据，而这些数据本应是随机的？

Question

因此，我正在构建一个 React 应用程序，该应用程序进行 API 调用以接收包含引用、作者和其他一些信息的随机对象。当组件安装时(页面刷新时)，对象被随机化。但是，绑定(bind)到最初拉取 API 的同一函数的按钮仅接收与页面加载时相同的对象。随机化是从端点提供的，而不是在我的代码中提供。

不知道为什么这不起作用，因为收到的数据在页面刷新时是唯一的，但在 onClick 事件上却不是。

这是我正在使用的一些代码:

我的 API 获取函数:

httpCallout(){
    fetch('https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1')
    .then(response => response.json())
    .then((data) => {
      const quote = data[0].content;
      this.setState({
        quote: quote,
        author: data[0].title
      });
    });
  }

生命周期函数内的调用:

  componentDidMount(){
    this.httpCallout();

  }

然后是元素

<button id="new-quote" className="btn btn-light" onClick={this.httpCallout}>New Quote</button>

同样，我希望在每个点击事件上收到一个包含新数据的新对象，但是，我收到的数据与页面加载时的数据相同。

编辑: 这只是被缓存的数据。我在获取请求中添加了 {cache: "no-cache"} ，问题就解决了。该问题已被标记为重复，但我发现解决方案需要略有不同，因为我的问题是使用 fetch API 而不是使用 jQuery 或 AJAX。

Answer 1

使用 {cache: "no-cache"} 禁用响应缓存:

fetch(
'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
 {cache: "no-cache"}
)

更多信息:https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/