时间戳

首页 > 解决方案 > 如何在 Javascript 中进行 2 个连续的 API 调用？

javascript - 如何在 Javascript 中进行 2 个连续的 API 调用？

问题描述

我打算从两个不同的 API（JSON 格式）中检索数据，解析然后在网页上显示每个提要的部分内容。

我的 Javascript 和 HTML 代码如下所示。结果：网页上只显示第二个 API 的数据，而不是第一个。

如何在网页上同时输出两个 API 的数据？谢谢！

我的 JavaScript 代码（apicall.js）： 

var apiurl = "api.json"
var apiurl1 = "api1.json"


// CALL THE FIRST API
function setup() {
loadJSON(apiurl, gotData);
}

var output = '';

function gotData(data) {
    var daten = data.datatable.data[0]
    var spalten = data.datatable.columns
    for (var i=0; i < spalten.length; i++) {
    output += '<p>' + spalten[i].name + ':  ' + daten[i] + '</p>';
    document.getElementById('root').innerHTML = output + '</br>';
    }
}

// CALL THE SECOND API
function setup() {
loadJSON(apiurl1, gotData1);
}

var output1 = '';

function gotData1(data) {
    var daten = data.datatable.data[0]
    var spalten = data.datatable.columns
    for (var i=0; i < spalten.length; i++) {
    output1 += '<p>' + spalten[i].name + ':  ' + daten[i] + '</p>';
    document.getElementById('root').innerHTML = output1;
    }
}

我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="utf-8" />
    <title>API Call</title>
    <link href="apicall.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="root"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/p5.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.20/addons/p5.dom.min.js"></script>	
	<script src="apicall.js"></script>
</body>
</html>

标签： javascript

解决方案

如果您增加output而不是仅在第二次调用中设置它怎么办？这样，我假设您可以在同一个setup函数中调用这两个 API：

var apiurls = [
        'api.json',
        'api1.json'
    ],
    elroot = document.getElementById('root'),
    index = 0;

function setup() {
    loadJSON(apiurls[index], gotData);
}

function gotData(data) {
    var daten = data.datatable.data[0],
        spalten = data.datatable.columns,
        output = '';
    for (var i = 0; i < spalten.length; i++) {
        output = '<p>' + spalten[i].name + ': ' + daten[i] + '</p>';
        elroot.innerHTML += '<br>' + output;
    }
    if (++index < apiurls.length) {
        setup();
    }
}

编辑：

我刚刚实现了一个用于调用nAPI URL 的循环。由于该函数loadJSON是异步的，所以回调最终gotData会再次调用setup，直到全部apiurls通过。

推荐阅读