Question

我们发现，有时我们的.fetch命令返回404。即使文件存在并且经常被点击，有时也会收到404。

window.fetch('/category/somepage', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(app.addAntiForgeryToken(postData))
  })
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok');
  })
  .then(result => {
    if (result.Status === 'OK') {
      //...
    }
  })

目前它正被throw new Error捕获。

当我们需要解决此问题时，什么是强制再次尝试直到页面被点击的最佳方法？我们应该显示一个重试按钮还是有办法循环此操作？我不确定为什么为什么甚至会抛出404错误，因为该文件肯定一直存在。

Answer 1

此处的经典操作是重试该操作，因为网络通信可能不可靠，尤其是在移动设备上。但是瞬态404是一个不同的问题，它指向Web服务器可能需要单独诊断的问题。（例如：如果它是一组充当单个端点的Web服务器，则其中一个可能配置错误，因此找不到其他服务器可以找到的资源。）

但是对于瞬态故障，经典的事情是重试：

function fetchJSONWithRetry(input, init, retries = 10) {
    return fetch(input, init)
        .then(function(response) {
            if (response.ok) {
                return response.json();
            }
            throw new Error('Network response was not ok'); // I usually use `new Error("HTTP status " + response.status)`
        })
        .catch(error => {
            if (retries <= 0) {
                throw error;
            }
            return fetchJSONWithRetry(input, init, retries - 1);
        });
}

像这样使用：

fetchJSONWithRetry('/category/somepage', {
    credentials: 'same-origin',
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(app.addAntiForgeryToken(postData))
})
.then(result => {
    if (result.Status === 'OK') {
        // ...
    }
})
.catch(error => {
    // All retries failed, handle it
});

（{input和init是fetch的名称used by the spec，所以我在上面使用过。）

Javascript Fetch偶尔会返回404

1 个答案: