fetch() 和 catch() 之间发生了什么

Question

const data = { username: 'example'};
function fetchRequest(counter: number) {
    fetch('https://example.com/profile', {
        method: 'POST', // or 'PUT'
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
    .then((response: Response) => {
        console.log('responded:' + counter);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}
//lost connection to https://example.com/profile
fetchRequest(1);
// 500 ms passed
// restored connection to https://example.com/profile
fetchRequest(2);

在上面的代码片段中我们是否有可能得到：

responded: 2
responded: 1

？ 或者是第一个 post 请求将首先发送，因为在引擎盖下“fetch”函数对请求进行排队，以便当另一个 fetch 被调用到同一地址时，它首先发送所有排队的请求？或者第一个请求是否启动其内部超时重新发送，以便它尝试每 300 毫秒发送第一个请求，因此第一次发送失败但第二次成功（在第二个请求发送成功之后）？

问题是我正在通过最终失效的连接发出发布请求。导致这个问题的原因是，当没有连接时，在调用 catch() 之前 fetch 有 2 分钟的冷却时间。即使连接恢复，初始请求仍将等待 2 分钟才抛出。

碰巧我发送的请求的顺序很重要，所以我不能只是在捕获时重新发送，因为在此冷却期间，其他一些请求可能已成功发送。尽管这不会是一个大问题，但如果系统在此冷却期间没有尝试发送初始请求。这就是我试图确定的事情，但找不到任何相关信息。

因此，如有任何建议，我们将不胜感激。

编辑：换句话说......让我们看看情况：

当没有连接时，会通过一些请求调用 fetch() （因此 fetch 会出现 2 秒超时）。 1 秒内连接恢复并调用另一个 fetch。

是否可以保证框架会在第二个请求之前发送第一个请求？难道是先发送了第二个请求，然后过一分钟又发送了第一个请求？

Answer 1

在您的示例中，永远无法保证响应的顺序，因为它还取决于后端。如果后端先完成第二个请求，则先返回第二个响应。这不仅仅是前端如何执行获取请求的顺序，因此在您的示例中，由于您不异步调用

fetchRequest(1)

和

fetchRequest(2)

，因此无法确保第一个响应先于第二个响应。

或者第一个请求是否启动其内部超时以重新发送 它会尝试每 300 毫秒发送第一个请求

我对这一层不太了解，但是只要请求的 TCP 连接保持活动状态，请求仍然可以挂起，直到重新连接或 TCP 连接被破坏。

对于您的具体问题：

是否可以保证第一个请求将由 第二个之前的框架？

回调、承诺或异步等待是您可能需要的。异步链接您的请求允许在执行下一个请求之前完成上一个请求。这是一个简单的示例，说明如何使用 Promise 重写示例

function fetchRequest(counter) {
  return new Promise(function(resolve, reject) {
    fetch('https://example.com/profile', {
        method: 'POST', // or 'PUT'
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
    .then((response) => {
        console.log('responded:' + counter);
        resolve(response);
    })
    .catch((error) => {
        console.error('Error:', error);
        reject(error);
    });
  })
}

fetchRequest(1)
  .then((resp) => fetchRequest(2))
  .catch(e => console.log(e))

async-await 对于长请求链来说更简洁，顺便说一句。

即使连接恢复，初始请求仍会 在抛出之前等待 2 分钟。

对此我没有答案，但您可以尝试通过throttle请求来减少等待时间。您可以使用库 lodash 来实现内置的节流方法。