Fetch can take an init object containing many custom settings that you might want to apply to the request, this includes an option called "headers".
The "headers" option takes a Header object. This object allows you to configure the headers you want to add to your request.
By adding pragma: no-cache and a cache-control: no-cache to your header you will force the browser to check the server to see if the file is different from the file it already has in the cache. You could also use cache-control: no-store as it simply disallows the browser and all intermediate caches to store any version of the returned response.
Here is a sample code:
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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
