创建要加载的 JSON 的订单

Question

我有多个外部 JSON 文件需要加载到我的页面上。有没有办法为它们设置加载顺序。

JavaScript

const func1 = () => {
    $.getJSON(json1, result => {});
    $.getJSON(json2, result => {});
}
...
    const func2 = () => {
    $.getJSON(json3, result => {});
    $.getJSON(json4, result => {});
}

现在我有 4 个不同的 getJSON，现在我可以看到，这是加载顺序 = json1=>json3=>json4=> json2。

有没有办法设置加载 json 文件的顺序。我要加载json1=>json2=>json3=>json4?

Answer 1

您可以将它们排队。上一个调用成功后启动新的 api 调用。

const jsonData = [];

$.getJSON(json1, result => {
  jsonData.push(result);
  $.getJSON(json2, result => {
    jsonData.push(result);
    $.getJSON(json3, result => {
      jsonData.push(result);
      $.getJSON(json4, result => {
        jsonData.push(result);
        processJsonData(jsonData);
      });
    })
  })
})

function processJsonData(jsonData) {
  const [
    json1,
    json2,
    json3,
    json4
  ] = jsonData;

  // Further proccessing
}

Answer 2

虽然理论上可行，但不建议这样做。

我宁愿从这 4 个请求中提出一个请求并处理那个请求，或者异步发送所有 4 个请求并在所有 4 个都解决后继续工作。

这是一个接一个地发送它们的简单解决方案：

$.getJSON(json1, result => {
    $.getJSON(json2, result => {
        $.getJSON(json3, result => {
            $.getJSON(json4, result => {});
        });
    });
});

这将是一个解决方案，用 promises 和 async/await 编写它（它有点干净）：

function sendJsonRequest(jsonData) {
    return new Promise(resolve => {
        $.getJSON(jsonData, result => resolve(result));
    });
}

async function getData() {
    let data1 = await sendJsonRequest(json1);
    let data2 = await sendJsonRequest(json2);
    let data3 = await sendJsonRequest(json3);
    let data4 = await sendJsonRequest(json4);
}

Answer 3

您的所有请求都是同时完成的，因此，您观察到的顺序与您的后端响应时间有关。

如果您绝对想在下一个请求开始之前等待一个请求，那么只需像这样将它们链接起来：

$.getJSON(json1, result => {
  $.getJSON(json2, result => {
    $.getJSON(json3, result => {
      $.getJSON(json4, result => {})
    })
  })
})

如果您想避免缩进：

const func1 = async () => {
  const result1 = await $.getJSON(json1);
  const result2 = await $.getJSON(json2);
  const result3 = await $.getJSON(json3);
  //...
}

Answer 4

您遇到的问题是因为请求都是异步的。因此，您完全受制于客户端机器和接收服务器之间的网络，以及服务器在给定时刻所承受的负载以及您要求完成的每项任务的艰巨程度，至于哪个最先收到并回复这些请求。

有一些方法可以在您的客户端逻辑中缓解这种情况，例如请求链接或同步请求，但是前者会对 UI 性能产生负面影响，而后者是糟糕的做法，因为它会锁定浏览器直到所有请求完成。

如果您需要依赖响应的顺序，最好的方法是将所有这些请求聚合到一个请求中，然后单独发送。然后，您的客户端逻辑可以继续处理，因为它可以访问您需要的所有数据。这也将在服务器性能方面更好地扩展。但是，它可能需要对您的服务器端逻辑进行一些更改，但对于更好的客户端逻辑和服务器端性能而言，这是一个很小的代价。

创建要加载的 JSON 的订单

Create an order for JSON to be loaded

javascript

jquery

json

function

getjson