Question

我有一些 api 端点。

one 返回所有服务器详细信息 (https://dnscheck.io/api/serverDetails/) 其他是 server specific 端点。 (https://dnscheck.io/api/query/?id=2&type=A&hostname=test.com) 对于每个 server_Id（我从 serverDetails 端点获得），我必须调用每个 api 端点。

我所做的是。

我遍历结果数组（我从 serverDetails 端点获得）

并且对于循环的每次迭代，我调用每个端点以获取 ip。

循环：

 for (const [index, item] of data.entries()) {
    const res = await fetch(
      `https://dnscheck.io/api/query/?id=${item.id}&type=${query.type}&hostname=${query.host}`
    );
    const result = await res.json();

    renderResult(result, item, index);
  }

渲染功能：

const renderResult = (result, data, index) => {

  const ip = document.querySelector(`.ip-address${index + 1}`);
  ip.innerHTML = result.answers[0].address;

};

通过这种方式，结果以同步方式显示在 DOM 中。（一个接一个）

但是，我想要的是，一旦结果准备好，就用结果更新 dom。

我能做什么？

Answer 1

不要使用 await，因为它会阻塞 for 循环并对结果进行排序。改用 .then()。

for (const [index, item] of data.entries()) {
  fetch(
      `https://dnscheck.io/api/query/?id=${item.id}&type=${query.type}&hostname=${query.host}`
    ).then(res => res.json())
    .then(result => renderResult(result, item, index));
}

Answer 2

您可以通过在数组上使用 map 并在其中使用 fetch 来并行执行它们。您可以通过使用 Promise.all 观察整体结果来知道它们何时全部完成：

await Promise.all(
    data.entries().map(async (index, item) => {
        const res = await fetch(
            `https://dnscheck.io/api/query/?id=${item.id}&type=${query.type}&hostname=${query.host}`
        );
        // You need to check `res.ok` here
        const result = await res.json();
        renderResult(result, item, index);
    )
);

请注意，如果任何输入承诺拒绝，Promise.all 将立即拒绝其承诺。如果您想知道哪些成功哪些失败，请改用 allSettled：

const results = await Promise.allSettled(
    data.entries().map(async (index, item) => {
        const res = await fetch(
            `https://dnscheck.io/api/query/?id=${item.id}&type=${query.type}&hostname=${query.host}`
        );
        // You need to check `res.ok` here
        const result = await res.json();
        renderResult(result, item, index);
    )
);
// Use `results` here, it's an array of objects, each of which is either:
// {status: "fulfilled", value: <the fulfillment value>}
// or
// {status: "rejected", reason: <the rejection reason>}

关于我的“您需要在此处检查 res.ok”注意事项：不幸的是，这只是 fetch API 中的一把枪。它只拒绝对网络故障的承诺，而不是 HTTP 错误。因此，404 会导致兑现的承诺。我写过它here。通常最好的方法是拥有您调用的包装函数，例如：

function fetchJSON(...args) {
    return fetch(...args)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error ${response.status}`); // Or an error subclass
        }
        return response.json();
    });
}

javascript：仅当结果准备好时才更新 DOM

2 个答案: