Javascript Fetch 偶尔返回 404

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 是 used by the spec 的名称 fetch，所以这就是我上面使用的。）