如何让浏览器或 PHP 缓存 fetch() 请求？

这基本上是相反的fetch()，如何发出非缓存请求？ https://stackoverflow.com/questions/29246444/fetch-how-do-you-make-a-non-cached-request.

假设我们有客户端：

<div onclick="fetch('/data.php').then(r => r.text()).then(s => console.log(s));">Click me</div>

PHP 中的服务器端：

<?php echo "hello"; /* in reality, this can be much more data 
                       and/or updated later with other content */ ?>

点击时多次 on Click me，请求通过网络多次完成，请求响应代码为“200”。

Thus, 没有进行缓存通过浏览器/通过 PHP：

如果实际上不需要这些数据，如何防止多次传输？

潜在的解决方案：自/data.php可以在服务器上更新，服务器可以使用日期时间元数据来服务数据请求timestamp，我可以将其存储在客户端 JS 变量中timestamp。然后在进行下一步之前fetch要求/data.php，我可以提出初步要求

fetch('/get_last_modification_date.php').(r => r.json()).then(data => {
    if (data['timestamp'] != timestamp)
        fetch('/data.php')...       // if and only if new data is here
});

因此，我们only do a fetch('/data.php')...如果该数据的时间戳比我们已有的时间戳更新。

这可行，但似乎我们正在手动做一些可以通过浏览器+PHP缓存机制完成的事情。

如何要求 PHP 和浏览器为我们完成所有这些缓存？

fetch()其行为与常规 HTTP 请求相同，因此您只需应用有关缓存的标准 HTTP 规则即可。 例如，您可以使用If-Modified-Since机制，我会解释一下。

当服务器返回资源的以下标头时：

Cache-Control: no-cache
Last-Modified: <date in RFC2616 format>

然后，在后续请求中，浏览器将发送一个If-Modified-Since标头与Last-Modified日期。 如果服务器返回一个304（未修改）状态，则浏览器将使用该资源的缓存版本。

备注：尽管有其名称，no-cache指令并不意味着资源不能被缓存；这只是意味着 浏览器在使用它之前必须与服务器验证它。

为了说明这一点，我假设您想要发送一些内容data.txt file:

<?php
// Get the modification time of the resource
$dataTime = filemtime('data.txt');

if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']))
{
    $sinceTime = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
    if($sinceTime==$dataTime)
    {
        // The browser already has the latest version of the resource
        header('HTTP/1.1 304 Not Modified');
        exit;
    }
}

// Send the resource
header('Cache-Control: no-cache');
header('Last-Modified: '.gmdate('D, d M Y H:i:s T', $dataTime));
header('Content-Type: text/plain; charset=UTF-8');
readfile('data.txt');
?>