如何组装 JavaScript 异步获取导致"original order"

Question

异步的好处是，它加快了读取速度，我们先获取可用的内容，而不是服务器响应。

但是这打乱了请求的顺序，在这种情况下，这对我来说很重要。

我想把一个连续故事的不同部分刮掉，所以顺序是必须的。

我是这样做的:

async function getSingle(url) {
await fetch(url).then(function (response) { 
return response.text();
}).then(function (html) {    
var output = document.querySelector('.output');
output.innerHTML=html;          
text += "n" + document.querySelector('.post-body').innerText;
});
}

它可以完美地获取所有内容，但是当我为多个url调用它时，它返回的是无序的。

[这里是新手，所以如果是一些非常琐碎的事情，请原谅。]

Answer 1

您的功能与(我建议完全使用async/await)相同

async function getSingle(url) {
const response = await fetch(url);
const html = await response.text();
const output = document.querySelector('.output');
output.innerHTML = html;
text += "n" + document.querySelector('.post-body').innerText; // "text" ???
}

为了保持顺序，可以通过for循环按顺序调用函数，请求将被一个接一个地调用:

const urls = ['url1', 'url2'];
for (const url of urls) {
await getSingle(url);
}

如果你想并行调用请求，让我们使用Promise.all。但是你必须重构你的函数——它将返回html字符串:

async function getSingle(url) {
const response = await fetch(url);
const html = await response.text();
return html
}
const htmls = await Promise.all(urls.map(url => getSingle(url));
for (const html of htmls) {
const output = document.querySelector('.output');
output.innerHTML = html;
text += "n" + document.querySelector('.post-body').innerText; // "text" ???
}

Answer 2

您可以尝试跟踪它们发送的顺序，然后当您收到响应时，尝试以相同的顺序向它们添加html。像这样(我没有测试):

let order = [];
let index = 0;
let completed_index=0;
async function getSingle(url) {
let i=index++;
order[i] = {index:i}
await fetch(url).then(function (response) { 
order[i] = response.text();
}).then(function (html) {
while(order[completed_index]!==undefined{
completed_index++;
var output = document.querySelector('.output');
output.innerHTML=order[completed_index];          
text += "n" + document.querySelector('.post-body').innerText;
}
});
}

之后可能需要清除数组