fetch（），您如何制作非缓存请求？

与fetch('somefile.json')，可以请求从服务器获取文件而不是从浏览器缓存中获取文件？fetch（），您如何制作非缓存请求？

换句话说，与fetch()，是否有可能规避浏览器的缓存？

2015-03-25 cc young

你有一个参考*获取*在[* ECMA-262 ed 6 draft *]（https://people.mozilla.org/~jorendorff/es6-draft.html）？我没看到它。或者你的意思是[* WHATWG Fetch生活标准*]（https://fetch.spec.whatwg.org）？ – RobG 2015-03-25 02:46:58

RobG - 使用https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent – 2015-03-25 03:29:30

Fetch可以将包含许多自定义设置的init对象包含在您可能想要应用于该请求中，其中包括一个名为“headers”的选项。

“标题”选项需要一个Header对象。该对象允许您配置要添加到请求中的标头。

通过添加编译：无缓存和缓存控制：无缓存到你的头，你将迫使浏览器来检查服务器是否该文件是从它已经在文件的不同缓存。您还可以使用缓存控制：no-store，因为它只是不允许浏览器和所有中间缓存存储任何返回的响应版本。

这里是一个示例代码：

var myImage = document.querySelector('img'); 
 

 
var myHeaders = new Headers(); 
 
myHeaders.append('pragma', 'no-cache'); 
 
myHeaders.append('cache-control', 'no-cache'); 
 

 
var myInit = { 
 
    method: 'GET', 
 
    headers: myHeaders, 
 
}; 
 

 
var myRequest = new Request('myImage.jpg'); 
 

 
fetch(myRequest, myInit) 
 
    .then(function(response) { 
 
    return response.blob(); 
 
    }) 
 
    .then(function(response) { 
 
    var objectURL = URL.createObjectURL(response); 
 
    myImage.src = objectURL; 
 
    });

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>ES6</title> 
 
</head> 
 
<body> 
 
    <img src=""> 
 
</body> 
 
</html>

希望这有助于。

来源

2015-03-25 03:12:45 burningfuses

优秀！非常感谢 – 2015-03-25 03:34:57

如何使用'new Request'并将一些参数传递给'cache'选项？我试图使用它，但它不起作用。 – Mitar 2016-01-21 07:05:44

更容易使用的缓存模式：

// Download a resource with cache busting, to bypass the cache 
    // completely. 
    fetch("some.json", {cache: "no-store"}) 
    .then(function(response) { /* consume the response */ }); 

    // Download a resource with cache busting, but update the HTTP 
    // cache with the downloaded resource. 
    fetch("some.json", {cache: "reload"}) 
    .then(function(response) { /* consume the response */ }); 

    // Download a resource with cache busting when dealing with a 
    // properly configured server that will send the correct ETag 
    // and Date headers and properly handle If-Modified-Since and 
    // If-None-Match request headers, therefore we can rely on the 
    // validation to guarantee a fresh response. 
    fetch("some.json", {cache: "no-cache"}) 
    .then(function(response) { /* consume the response */ }); 

    // Download a resource with economics in mind! Prefer a cached 
    // albeit stale response to conserve as much bandwidth as possible. 
    fetch("some.json", {cache: "force-cache"}) 
    .then(function(response) { /* consume the response */ });

refrence：https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/

来源

2017-02-28 20:47:04

这是更合适的答案。您可以通过这些选项处理标题，如'If-Modified-Since'和'If-None-Match'。 – Nigiri 2017-03-15 07:57:55

这似乎在Firefox（54），但不是Chrome（60）。燃烧熔炉的答案确实奏效。 – Scimonster 2017-08-15 12:10:59

您可以设置'Cache-Control': 'no-cache'在这样的：头

return fetch(url, { 
    headers: { 
    'Cache-Control': 'no-cache' 
    } 
}).then(function (res) { 
    return res.json(); 
}).catch(function(error) { 
    console.warn('Failed: ', error); 
});

来源

2017-05-14 20:10:52

fetch（），您如何制作非缓存请求？

回答

相关问题