循环中多个相同的 XHR 并获取最后一个请求的响应。答案

【问题标题】：Multiple same XHR in a Loop and get the response of last request.循环中多个相同的 XHR 并获取最后一个请求的响应。
【发布时间】：2018-07-25 07:49:26
【问题描述】：

我有一个关于 Promise 的问题，async-await。

Q – 假设我们有一个 for 循环，其中有一个 XHR 请求，现在我们如何确保记录最后一个 XHR 请求响应。

例如。

let myresponse = “”;
for(let i = 0; i < 5; i++){
fetch("http://www.mocky.io/v2/5b56dab131000062164d1f15?mocky-delay=" + Math.floor(Math.random() * 5000) + "ms").then(resp => resp.json()).then(resp => {
          console.log(resp);
        });
}

现在在上述情况下，我想确保“myresponse”变量具有最后一个 XHR 请求的响应，即当“i”为 4 时。每个请求可能有不同的响应延迟。比方说第一个请求延迟 3 秒，响应 - “XXX” 第二个请求延迟 2 秒，响应 - “XXX” 第三个请求有 5 秒的延迟响应 - “XXX” 第 4 个请求的响应延迟为 2 秒 – “XXX” 第 5 个请求有 1 秒的响应延迟 - “XXX”

所以“myresponse”应该包含来自第 5 个请求而不是第 3 个请求的“XXX”。

我已经使用闭包和增量变量完成了它，但在这种情况下，我们必须维护一个保留非常请求响应的集合。

现实世界的示例可能是，如果用户点击按钮 10 次，我们希望用户看到第 10 次请求的结果，而不是耗时最长的请求的结果。

【问题讨论】：

标签： javascript ajax loops xmlhttprequest

【解决方案1】：

对于您的示例，您可以简单地调整最后一个 then() 回调。

例如：

.then(resp => { if (i === 4) { myresponse = resp; } }

对于更通用/按钮的情况，您可以有一个计数器来跟踪已发出的请求数量，然后让请求回调检查在完成时它们是否是最新请求：

let latestId = 0;
let latestResult;
function doFetch() {
    let myId = ++latestId;
    fetch("https://example.com").then(resp => {
        if (myId === latestId) {
            latestResult = resp.json();
        }
    }
}

【讨论】：