HTMXでのAJAX通信の同期方法

Synchronization

フロントエンドの開発では多くの場合、2つの要素間でリクエストを調整します。

たとえば、ある要素からのリクエストが完了するのを待ってから、ほかのリクエストを投げることが必要な場合があります HTMXはこれを実装するのに役立つhx-sync属性を提供します。

以下の例ではformのsubmitと、子要素でのリクエストの、個々の入力が存在することが確認できます。

<form hx-post="/page">
    <input id="name" name="name" type="text"
        hx-post="/name_exists"
        hx-trigger="change"
    >
    <button type="submit">変更</button>
</form>

このように、hx-syncを使用せずに、input要素に入力を行いすぐにformを送信すると、formからの/pageへのリクエストと、name_existsへのリクエストの、2つの並列リクエストがトリガーされます。 これでは二つの要素の同期がとれません。

しかし、hx-sync="closest form:abort"を使用すると、フォームのリクエストを監視し、`のリクエストを中止します

<form hx-post="/page">
    <input id="name" name="name" type="text"
        hx-post="/name_exists"
        hx-trigger="change"
        hx-sync="closest form:abort"
    >
    <button type="submit">変更</button>
</form>

• hx-sync="closest form:abort"
  • この属性は、同期の動作を制御します。この場合、closest form（最も近いフォーム）の中で新しいリクエストが開始されたときに既存のリクエストをabort（中止）することを意味します。これにより、同じフォーム内で複数のリクエストが同時に実行されないようにします。

これにより、宣言的な方法で2つの要素間の同期が約束されます。

その他にも、id属性を指定した同期も可能です。

<button id="request-button" hx-post="/example">
    Issue Request
</button>
<button onclick="htmx.trigger('#request-button', 'htmx:abort')">
    Cancel Request
</button>