@rails-ujs 如何拦截 ajax:complete

Question

在一个使用 @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。

我这里漏掉了什么吗？

- Sig

---

你尝试过 ajax:done 吗？ - Aniket Tiwari

是的，结果相同。谢谢。 - Sig

你能否展示一下如何发送Ajax请求？ - kevinluo201

使用标准的link_to … remote: true - Sig

Answer 1

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

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

因为无论服务器响应什么结果，ajax:complete都会触发，所以我们可以利用它来找到下一步。

情况A：请求挂起。
下一步：尝试找出为什么请求在服务器端卡住了。

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

• ajax:success
• ajax:error
• ajax:complete

并在内部调用event.preventDefault()。您还可以打开Source选项卡并选中复选框，在某些特定的XHR相关事件上添加断点：

• 错误
• 加载
• 加载结束

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

尝试查找是否有任何错误或调用event.preventDefault()

我在我的机器上测试了您的代码，它运行良好，所以我只是想给您一些参考意见。

- kevinluo201