@rails-ujs 如何拦截 ajax:complete答案

【问题标题】：@rails-ujs How to intercept ajax:complete@rails-ujs 如何拦截 ajax:complete
【发布时间】：2021-12-03 12:52:23
【问题描述】：

在使用 @rails/ujs（无 jquery）的 Rails 6.1 应用程序中，我试图拦截 ajax 请求何时触发以及何时完成。

我已将以下内容添加到我的application.js

document.addEventListener("turbolinks:load", () => {
  document.addEventListener("ajax:send", () => {
    console.log('SEND')
  })
  document.addEventListener("ajax:complete", () => {
    console.log('COMPLETE')
  })
})

当我解雇他们时，我正确地得到了SEND，但是当他们结束时，我没有得到（预期的）COMPLETE。

我错过了什么吗？

【问题讨论】：

你试过 ajax:done 吗？
是的，结果相同。谢谢。
你能不能也展示一下你是如何发送 ajax 请求的？
使用标准的 link_to ... 远程：true

标签： ruby-on-rails rails-ujs

【解决方案1】：

我有一些个人想法来调查这种错误。

提示：SEND 在控制台中打印时正常工作（确保控制台中没有错误消息）
想法：打开网络选项卡并检查请求是否挂起。

因为无论服务器响应的结果如何，ajax:complete 都会触发，因此我们可以使用它来查找下一步。

情况A：请求待处理。
nextStep：尝试找出为什么请求会卡在服务器端

situationB：请求响应但事件仍然没有触发
下一步：尝试查找是否有任何脚本已经在监听 rails-ujs 事件

ajax:成功
ajax:错误
ajax：完成

并在里面打电话给event.preventDefault()。您还可以打开Source 选项卡并选中复选框以在某些特定的 XHR 相关事件处添加断点：

错误
加载
加载结束

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#events

并尝试查找那里是否有任何错误或致电event.preventDefault()

我测试了你的代码，它在我的机器上运行良好，所以我只想给你一些想法供你参考。

【讨论】：