时间戳

首页 > 解决方案 > 从多个api获取数据

javascript - 从多个api获取数据

问题描述

我需要从多个 API 中获取数据并将它们显示在表格中。我想出的是：

var req = $.ajax({
  url: "....linkhere",

  dataType: 'jsonp'
});
var req = $.ajax({
  url: "....linkhere1",

  dataType: 'jsonp'
});

req.done(function(data) {
  console.log(data);
  var infoTable = $("<table />");

  var arrayL = data.length;
  var outputString = '';

  for (var i = 0; i < arrayL; i++) {
    var tableRow = $("<tr/>");

    titleString = data[i].title;
    var titleCell = $("<td />", {
      text: titleString
    });
    detailString = data[i].description;
    var detailCell = $("<td/>", {
      text: detailString
    });

    tableRow.append(titleCell).append(detailCell);
    infoTable.append(tableRow);
  }

  $("#display-resources").append(infoTable);
});
});

虽然，这样我只能从一个 api 获取数据。我怎样才能从多个中获取它？

编辑：

我正在尝试添加文本输入，因此我可以发送有关特定单词的请求。我正在尝试用新结果附加现有表。我试图更改下面作为答案提供的代码。但是，我做了一些工作，但它不起作用。

$("#inputChoice").on("blur", function() {
    let choice = $(this).val();
    let req = $.ajax({
        url: "...APIlink"+choice,
        dataType: "jsonp"
    });
    req.done(function (data) {
        console.log(data);
        var infoTable = $("<table />");

        let arrayL = data.length;
        for (var i = 0; i < arrayL; i++) {
            var tableRow = $("<tr/>");

            titleString = data[i].title;
            var titleCell = $("<td />", {
                text: titleString
            });
            titleCell.addClass("title-row");


            detailString = data[i].description;
            var detailCell = $("<td/>", {
                text: detailString


            });
            detailCell.addClass("details-row")

            tableRow.append(titleCell).append(detailCell);
            infoTable.append(tableRow);
        }
        $("#display-resources").append(infoTable);
});
});

标签： javascriptjqueryajaxapi

解决方案

从端点请求数据，当它们都完成后创建一个表

function multiReq(...links) {
  let responseCount = links.length;
  const responses = [];
  let handler;
  function responseHandler(i) {
    return data => {
      responseCount -= 1;
      responseCount === 0
        ? handler([].concat(...responses))
        : (responses[i] = data)
    }
  }
  links.forEach((link, i) => $.ajax({
    url: link,
    dataType: 'jsonp'
  }).done(responseHandler(i)));
  return {
    done(callback) {
      handler = callback;
    }
  };
}


multiReq(link1, link2).done((data) => {})

或者

function multiReq(...links) {
  return Promise.all(links.map(link => $.ajax({
    url: link,
    dataType: 'jsonp'
  }))).then((...responses) => [].concat(...responses))
}


multiReq(link1, link2).then(data => {
    // create table
})

或者

function multiReq(...links) {
  return $.when(...links.map(link => $.ajax({
    url: link,
    dataType: 'jsonp'
  }))).then((...responses) => [].concat(...responses.map(([data]) => data)))
}


multiReq(link1, link2).done(data => {
    // create table
})

或尽可能接近您的代码：

var req1 = $.ajax({
  url: "https://wt-65edf5a8bfb22e61214c31665c92dbd2-0.sandbox.auth0-extend.com/link-1",

  //dataType: 'jsonp'
});
var req2 = $.ajax({
  url: "https://wt-65edf5a8bfb22e61214c31665c92dbd2-0.sandbox.auth0-extend.com/link-1",

  //dataType: 'jsonp'
});

$.when(req1, req2).done(function([data1], [data2]) {
  var data = data1.concat(data2); // merge data from both request into one
  
  //console.log(data);
  var infoTable = $("<table />");

  var arrayL = data.length;
  var outputString = '';

  for (var i = 0; i < arrayL; i++) {
    var tableRow = $("<tr/>");

    titleString = data[i].title;
    var titleCell = $("<td />", {
      text: titleString
    });
    detailString = data[i].description;
    var detailCell = $("<td/>", {
      text: detailString
    });

    tableRow.append(titleCell).append(detailCell);
    infoTable.append(tableRow);
  }

  $("#display-resources").append(infoTable);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display-resources"></div>

推荐阅读