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

Posted 2023-05-09

【中文标题】同步调用多个API并立即显示结果

【英文标题】：call multiple APIs synchronously and show results immediately

【发布时间】：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

【参考方案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>