同步调用多个API并立即显示结果

Question

我在jQueryMobile和PhoneGap工作。 目前我正面临一个大问题。当我单击一个按钮时，它会逐个调用多个API并逐个获取结果。但是在结果页面中，只有在获得所有API的所有结果后才显示它。

在我的应用程序中提交Button时它返回一个JSON，其中包含要调用的不同API列表

然后我们将每个API 异步调用。

我们逐一获得所有结果。只有在获得所有结果后才会显示结果。

然后我的问题是，有什么方法可以在我获得First API结果时显示结果页面，并在背景中的结果页面中显示数据的同时调用所有其他API？

目前显示结果页面时间超过30秒。但是当我们得到第一个API结果时，我们需要显示结果页面。我们得到结果为JSON格式。

任何人都可以帮助我:( 我失去了一周的时间来解决这个问题!!

Answer 1

有许多HTML模板解决方案可用jQuery模板，下划线和Mustache等，更好地使用Mustache我认为这可以解决您的问题。如果你正在项目中进行如此多的DOM操作，那么最好使用任何模板。 例如：

HTML模板

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

JSON DATA

{
  "header": "Colors",
  "items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
  ],
  "empty": false
}

输出HTML

<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>