为何调用随机颜色API无法获取新结果？

问题描述 #

我正在制作一个随机颜色生成器，刷新页面或点击生成按钮时，调用API得到的结果始终相同，但直接刷新API站点页面时，返回的信息是随机变化的。

相关信息：

• API地址：https://www.colr.org/json/colors/random/5
• 演示地址：https://codepen.io/penny289/pen/YzaBggG?editors=0010

问题原因 #

这是因为浏览器会对GET请求的响应进行缓存，重复调用相同API地址时，浏览器直接返回缓存的旧结果，而非向服务器发起新请求。但直接刷新API站点页面时，浏览器会强制绕过缓存，因此能获取新的随机颜色。

解决方案 #

可以通过两种方式禁用请求缓存，让每次调用都获取新结果：

方法1：添加随机参数到URL #

在URL末尾追加时间戳或随机数，让浏览器识别为新请求：

const BASE_URL = 'https://www.colr.org/json/colors/random'
const colorCardsTotal = '5'
function getColors(){
  // 追加时间戳作为唯一参数
  const timestamp = new Date().getTime();
  axios.get(`${BASE_URL}/${colorCardsTotal}?t=${timestamp}`)
  .then(function (response) {
    console.log(response.data.colors)
  })
  .catch(function (error) {
    console.log(error)
  })
}

getColors()

方法2：设置请求头禁用缓存 #

通过请求头告知浏览器不要缓存该请求：

const BASE_URL = 'https://www.colr.org/json/colors/random'
const colorCardsTotal = '5'
function getColors(){
  axios.get(`${BASE_URL}/${colorCardsTotal}`, {
    headers: {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0'
    }
  })
  .then(function (response) {
    console.log(response.data.colors)
  })
  .catch(function (error) {
    console.log(error)
  })
}

getColors()

原始代码 #

JavaScript代码 #

const BASE_URL = 'https://www.colr.org/json/colors/random'
const colorCardsTotal = '5'
function getColors(){
  axios.get(BASE_URL+'/'+colorCardsTotal)
  .then(function (response) {
    console.log(response.data.colors)
  })
  .catch(function (error) {
    // 处理错误
    console.log(error)
  })
}

getColors()

HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

内容的提问来源于stack exchange，提问作者Penny Chang