使用 HTMX 处理错误答案

【问题标题】：handle errors with HTMX使用 HTMX 处理错误
【发布时间】：2021-11-20 15:30:26
【问题描述】：

<form  
 class="" id="form" hx-post="/add/" hx-swap="afterbegin" hx-target="#big_list" hx-trigger="submit">
    <input type="text" name="langue1" >
    <input type="text" name="langue2">
    <div id="errors"></div>
    <button type="submit">GO</button>
</form> 
<div id="big_list"> 
.....
</div>

我在#big_list 中有一个很大的列表，我希望我的#form 在提交时只附加一行。

如何使用 htmx 处理错误并在 #errors 中显示消息？

【问题讨论】：

我的意思是：-如果我的请求成功，结果将放在hx-target（这里：#big_list）-但是如果我的请求失败（300、400、HttpErrors ....）怎么办我把结果放在#errors but not in #big_list` 中？我就是这个意思。
对不起。我以前没有这样做过。偶然我读到这个：twitter.com/htmx_org/status/1443316447942348805
这些文档有帮助吗？ htmx.org/docs/#requests 如果服务器出现错误响应（例如 404 或 501），htmx 将触发 htmx:responseError 事件，您可以处理该事件。如果发生连接错误，将触发 htmx:sendError 事件。
作者回复我：github.com/bigskysoftware/htmx/issues/607

标签： htmx

【解决方案1】：

我创建了这个解决方案，以便您可以使用 hx-target-error = 定义在请求失败后将显示哪些 HTML

document.body.addEventListener('htmx:afterRequest', function (evt) {
  const targetError = evt.target.attributes.getNamedItem('hx-target-error')
  if (evt.detail.failed && targetError) {
    document.getElementById(targetError.value).style.display = "inline";
  }
});
document.body.addEventListener('htmx:beforeRequest', function (evt) {
  const targetError = evt.target.attributes.getNamedItem('hx-target-error')
  if (targetError) {
    document.getElementById(targetError.value).style.display = "none";
  }
});

【讨论】：

【解决方案2】：

虽然它不遵循 REST 原则，但您可以考虑使用 swap-oob 将错误报告给您的用户。例如，您的请求可能会返回（有点误导）状态 200，但包含如下内容：

<div id="errors" hx-swap-oob="true">
  There was an error processing your request...
</div>

如果更精确地遵循 REST 很重要，那么您将需要监听 htmx:responseError 事件，正如 @guettli 在他之前的回答中提到的那样。

【讨论】：