Question

我有一个API端点，它以JOSN格式返回一个对象。它确实提供了来自JSON的标题和内容属性。我在前端使用此结果。我在UI中有一个按钮，单击该按钮会打到API端点。响应来自API，并照常显示在前端。

问题：它总是返回相同的结果。但是，当我尝试在浏览器中点击API（使用“重新加载当前页面”标签）时，每次点击都会返回不同的结果。

我尝试重新加载整个页面。但是我认为重新加载整个页面是不必要的。

 <div id="main" role="main" class="page-content">
    <div class="quote-actions">
      <button class="next" type="button" onclick="getQuote()">Show me another</button>
    </div>

    <blockquote class="quote-content">
    </blockquote>
    <cite class="quote-citation">
      <span class="quote-book"></span>
      <span class="quote-author">A</span>
    </cite>
  </div>

function randomize() {

  var url = 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1';

  // Use fetch() to make the request to the API
  fetch(url).then(function(result) {
      return result.json();
  }).then(function(json) {
    var authorTag = document.getElementsByClassName("quote-author");
    var span = authorTag[0];
    span.textContent = json[0].title;
    console.log(span);

    var contentTag = document.getElementsByClassName("quote-content");
    span = contentTag[0];
    span.innerHTML = json[0].content;
    console.log(content);
  });
}

function getQuote() {
  randomize();
}

目标：每次触发onclick事件时，它应该返回新的响应。

Answer 1

您的ajax调用可能已被缓存。在您的Ajax调用中，在网址末尾添加一个日期时间戳会结束此事。

var url = 'https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&' + new Date();

Answer 2

内部获取缓存。尝试fetch(url, {cache: "no-cache"})

每次击中api端点时如何进行api调用以获取新数据

2 个答案: