javascript - 如何从多个 URL 获取 JSON 数据

Question

我需要从两个 URL 获取数据并将它们提取到一个表中。我怎样才能做到这一点？谁能帮我怎么做？提前致谢。

我试过的就在这里。但它什么也没显示。

var url1 = 'http://localhost:8080/WebService/rest/payment/get/payment';
var url2 = 'http://localhost:8080/WebService/rest/orderdetails/get/all';
$(document).ready(function() {
  $.when(
    $.getJSON(url1),
    $.getJSON(url2)).done(function(result1, result2) {
    var table = $("#oTable");
    $.each(result1, result2, function(i, value) {
      table.append('<tr><td>1</td><td class="txt-oflo">' + value.payment + '</td><td>' + value.username + '</td><td class="txt-oflo">' + value.date + '</td><td><span class="text-success">' + value.price + '</span></td><td><a href=""><button class="btn btn-success">Place</button></a>  <a href=""><button class="btn btn-danger">Cancel</button></a></td></tr>');
    });
  });
});

Answer 1

您可以通过 fetch 使用更现代的请求版本，并使用原生支持的 Promise.all 和 await:

const url1 = 'http://localhost:8080/WebService/rest/payment/get/payment';
const url2 = 'http://localhost:8080/WebService/rest/orderdetails/get/all';
const fetchJSON = url => fetch(url).then(response => response.json())

$(document).ready(async () => {
  const [result1, result2] = await Promise.all(fetchJSON(url1), fetchJSON(url2));
  const results = [...result1, ...result2];
  const table = $("#oTable");
  results.forEach((value) => (
      table.append('<tr><td>1</td><td class="txt-oflo">' + value.payment + '</td><td>' + value.username + '</td><td class="txt-oflo">' + value.date + '</td><td><span class="text-success">' + value.price + '</span></td><td><a href=""><button class="btn btn-success">Place</button></a>  <a href=""><button class="btn btn-danger">Cancel</button></a></td></tr>')
  ));
});