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

【问题标题】：call multiple APIs synchronously and show results immediately同步调用多个API并立即显示结果
【发布时间】：2013-08-13 08:28:20
【问题描述】：

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

在我的应用程序中，当我提交按钮并返回一个 JSON，其中包含要调用的不同 API 列表

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

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

那么我的问题是，当我获得第一个 API Result 并在后台结果页面中显示数据时同时调用所有其他 API 时，有什么方法可以显示结果页面？

目前用于显示结果页面需要超过 30 秒的时间。但是我们需要在获得第一个 API 结果时显示结果页面。我们得到 JSON 格式的结果。

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

【问题讨论】：

如果您将结果一一放入 DOM，它们应该会立即显示出来。还是从表单内部发送？
我们不是从表单内部发送的
你能分享执行ajax请求和更新DOM的代码吗？
可能是您在 ajax 请求中设置了 async:false 。将其更改为 async:true 或删除该行，默认情况下 async 设置为 true。
@abhidsm 我们一一得到结果。但它仅在从所有 API 获取所有结果后附加到 HTML

标签： json api jquery jquery-mobile

【解决方案1】：

有许多 HTML 模板解决方案可用 jQuery Templates、Underscore 和 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 数据

{
  "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>

【讨论】：