htmx.ajax 在进行多个查询时仅调用两次

Question

我在多个 x-data 块内的给定属性上使用 Alpinejs 的 $watch() ，以便在该属性发生更改时使用自定义处理程序调用 htmx.ajax 。下面是一个片段：

HTML:

<div x-data="{profiles:[]}">
  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div x-data="..." x-init="$watch('profiles', val=>onProfilesChanged())">...</div>

  <div>
  <!-- profiles modified here in response to user input -->
  ...
  </div>
</div>

Javascript:

function onProfilesChanged() {
  htmx.ajax('GET', ..., {'handler': (evt,response)=>{...}});
}

在浏览器中调试 我可以看到 onProfilesChanged 按预期被调用（3 次），但只发送了 2 个网络请求，并且回调处理程序只执行了两次。 这些请求似乎对应于第一次和最后一次调用，并且中间的所有内容都以某种方式丢失（尝试使用更多 $watch() 回调）。 Firefox 和 Chromium 上的行为是相同的，因此我怀疑这是浏览器限制，但我在 htmx 文档中找不到有关可排队的 Ajax 请求最大数量的任何内容。

我在这里完全不知所措，任何对可能发生的事情的了解将不胜感激。谢谢！

编辑：在 for 循环中使用 htmx.ajax() 时也会出现问题，所以这似乎确实是在 htmx 方面。有一个 hx-sync 标签来设置 hx-get/post.. 标签的队列行为，但似乎不适用于 JS API。

Answer 1

最后设法找到了解决方法：向 Ajax 请求的选项属性添加动态 source 元素修复了该问题。在 for 循环的情况下，我仍然限制每个元素 2 个请求，但来自不同来源的请求现在有不同的队列。

保留此信息以供将来参考，以防对其他人有所帮助。