如果出现404错误，请在XMLHttpRequest中只刷新页面一次

Question

我想看看是否有任何方法可以实现计数器或某种解决方案，使页面在404事件时只刷新一次。

在我最后将与大家分享的代码的第90行中，我遇到了问题，因为404错误形成了一个循环，页面被无限期刷新。

第90行：

} else if (this.status === 404) { location.reload(); console.log("Error 404")}

完整代码：

this.refreshCover = function (songIt = '', artistIt) {
// Default cover art
var urlCoverArt = DEFAULT_COVER_ART;


// URL of proxy for lyrics Api CORS Allow Origin *
var proxy_URL = PROXYURL;

var itunes_api = 'https://itunes.apple.com/search?term=';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
var coverArt = document.getElementById('currentCoverArt');
var coverBackground = document.getElementById('bgCover');
var backgroundDefault = 'img/background.jpg';


// Get cover art URL on iTunes API
if (this.readyState === 4) { 

if (this.status === 200) {
var data = JSON.parse(this.responseText);

var artworkUrl100 = (data.resultCount) ? data.results[0].artworkUrl100 : urlCoverArt;
// Se retornar algum dado, alterar a resolução da imagem ou definir a padrão
urlCoverArt = (artworkUrl100 != urlCoverArt) ? artworkUrl100.replace('100x100bb', '512x512bb') : urlCoverArt;
var urlCoverArt96 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '96x96bb') : urlCoverArt;
var urlCoverArt128 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '128x128bb') : urlCoverArt;
var urlCoverArt192 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '192x192bb') : urlCoverArt;
var urlCoverArt256 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '256x256bb') : urlCoverArt;
var urlCoverArt384 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '384x384bb') : urlCoverArt;


coverArt.style.backgroundImage = 'url(' + urlCoverArt + ')';
coverArt.className = 'animated bounceInLeft';

// If song cover art = default cover art change background default              
if(coverArt.style.backgroundImage == 'url("img/103-logo.png")') {
coverBackground.style.backgroundImage = 'url(' + backgroundDefault + ')'
} else  { coverBackground.style.backgroundImage = 'url(' + urlCoverArt + ')'
}


setTimeout(function () {
coverArt.className = '';
}, 2000);


if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: songIt,
artist: artistIt,
artwork: [{
src: urlCoverArt96,
sizes: '96x96',
type: 'image/png'
},
{
src: urlCoverArt128,
sizes: '128x128',
type: 'image/png'
},
{
src: urlCoverArt192,
sizes: '192x192',
type: 'image/png'
},
{
src: urlCoverArt256,
sizes: '256x256',
type: 'image/png'
},
{
src: urlCoverArt384,
sizes: '384x384',
type: 'image/png'
},
{
src: urlCoverArt,
sizes: '512x512',
type: 'image/png'
}
]
});
}

} else if (this.status === 404) { location.reload(); console.log("Error 404")}
}
}   


xhttp.open('GET', proxy_URL + itunes_api + artistIt + ' ' + songIt + '&media=music&limit=1.', true);
xhttp.send();
}

固定完整代码：信用@F.Igor

this.refreshCover = function (songIt = '', artistIt) {
// Default cover art
var urlCoverArt = DEFAULT_COVER_ART;


// URL of proxy for lyrics Api CORS Allow Origin *
var proxy_URL = PROXYURL;

var itunes_api = 'https://itunes.apple.com/search?term=';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
var coverArt = document.getElementById('currentCoverArt');
var coverBackground = document.getElementById('bgCover');
var backgroundDefault = 'img/background.jpg';


// Get cover art URL on iTunes API
if (this.readyState === 4) { 

if (this.status === 200) {
var data = JSON.parse(this.responseText);

var artworkUrl100 = (data.resultCount) ? data.results[0].artworkUrl100 : urlCoverArt;
// Se retornar algum dado, alterar a resolução da imagem ou definir a padrão
urlCoverArt = (artworkUrl100 != urlCoverArt) ? artworkUrl100.replace('100x100bb', '512x512bb') : urlCoverArt;
var urlCoverArt96 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '96x96bb') : urlCoverArt;
var urlCoverArt128 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '128x128bb') : urlCoverArt;
var urlCoverArt192 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '192x192bb') : urlCoverArt;
var urlCoverArt256 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '256x256bb') : urlCoverArt;
var urlCoverArt384 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '384x384bb') : urlCoverArt;


coverArt.style.backgroundImage = 'url(' + urlCoverArt + ')';
coverArt.className = 'animated bounceInLeft';

// If song cover art = default cover art change background default              
if(coverArt.style.backgroundImage == 'url("img/103-logo.png")') {
coverBackground.style.backgroundImage = 'url(' + backgroundDefault + ')'
} else  { coverBackground.style.backgroundImage = 'url(' + urlCoverArt + ')'
}


setTimeout(function () {
coverArt.className = '';
}, 2000);


if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: songIt,
artist: artistIt,
artwork: [{
src: urlCoverArt96,
sizes: '96x96',
type: 'image/png'
},
{
src: urlCoverArt128,
sizes: '128x128',
type: 'image/png'
},
{
src: urlCoverArt192,
sizes: '192x192',
type: 'image/png'
},
{
src: urlCoverArt256,
sizes: '256x256',
type: 'image/png'
},
{
src: urlCoverArt384,
sizes: '384x384',
type: 'image/png'
},
{
src: urlCoverArt,
sizes: '512x512',
type: 'image/png'
}
]
});
}

localStorage.setItem("is_retry",'0'); // reset variable retries  
} else if (this.status === 404) { 
console.log("Error 404"); // console before refresh
if (localStorage.getItem("is_retry")!='1') {
localStorage.setItem("is_retry",'1'); // mark retry
location.reload(); 
}

}
}   
}   

xhttp.open('GET', proxy_URL + itunes_api + artistIt + ' ' + songIt + '&media=music&limit=1.', true);
xhttp.send();
}

Answer 1

我认为您在前端无法轻松实现这一点。刷新页面后，状态将重置。您可以在后端执行此操作，对于每个404响应，您都需要存储标识符(用户IP(、404详细信息和时间戳。对于每个404响应，如果在定义的时间范围内存储了另一个错误的记录，您将检查当前用户IP。

似乎很复杂。开销太大。更简单的方法是，如果请求无效，则重复该请求，并刷新数据，而不是重新加载用户页面。

if (!makeRequest()) {
makeRequest();
}
function makeRequest() {
xhttp.onreadystatechange = function() {
var coverArt = document.getElementById('currentCoverArt');
var coverBackground = document.getElementById('bgCover');
var backgroundDefault = 'img/background.jpg';
// Get cover art URL on iTunes API
if (this.readyState === 4) {
if (this.status === 200) {
var data = JSON.parse(this.responseText);
var artworkUrl100 = (data.resultCount) ? data.results[0].artworkUrl100 : urlCoverArt;
// Se retornar algum dado, alterar a resolução da imagem ou definir a padrão
urlCoverArt = (artworkUrl100 != urlCoverArt) ? artworkUrl100.replace('100x100bb', '512x512bb') : urlCoverArt;
var urlCoverArt96 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '96x96bb') : urlCoverArt;
var urlCoverArt128 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '128x128bb') : urlCoverArt;
var urlCoverArt192 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '192x192bb') : urlCoverArt;
var urlCoverArt256 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '256x256bb') : urlCoverArt;
var urlCoverArt384 = (artworkUrl100 != urlCoverArt) ? urlCoverArt.replace('512x512bb', '384x384bb') : urlCoverArt;
coverArt.style.backgroundImage = 'url(' + urlCoverArt + ')';
coverArt.className = 'animated bounceInLeft';
// If song cover art = default cover art change background default              
if (coverArt.style.backgroundImage == 'url("img/103-logo.png")') {
coverBackground.style.backgroundImage = 'url(' + backgroundDefault + ')'
} else {
coverBackground.style.backgroundImage = 'url(' + urlCoverArt + ')'
}
setTimeout(function() {
coverArt.className = '';
}, 2000);
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: songIt,
artist: artistIt,
artwork: [{
src: urlCoverArt96,
sizes: '96x96',
type: 'image/png'
},
{
src: urlCoverArt128,
sizes: '128x128',
type: 'image/png'
},
{
src: urlCoverArt192,
sizes: '192x192',
type: 'image/png'
},
{
src: urlCoverArt256,
sizes: '256x256',
type: 'image/png'
},
{
src: urlCoverArt384,
sizes: '384x384',
type: 'image/png'
},
{
src: urlCoverArt,
sizes: '512x512',
type: 'image/png'
}
]
});
}
} else if (this.status === 404) {
console.log("Cover art not found: 404")
return false;
}
}
return true;
}
}

Answer 2

解决方案：信用@F.Igor

//code for normal / successful case
// ...
localStorage.setItem("is_retry",'0'); // reset variable retries 

} else if (this.status === 404) { 
console.log("Error 404"); // console before refresh
if (localStorage.getItem("is_retry")!='1'){
localStorage.setItem("is_retry",'1'); // mark retry
location.reload(); 
} else {
//What to do if it has already been retried? message, notice, etc
}