在大多数移动应用程序甚至一些桌面应用程序中，您很可能会通过 Ajax 调用 与服务器进行 API 通信。由于这些调用可能需要超过一两秒的时间，因此在进行 API 调用时，为用户提供反馈是一个很好的 UX。这就是 QAjaxBar 帮助您的地方。

QAjaxBar 是一个组件，它在进行 Ajax 调用（无论使用哪个 Ajax 库）时都会显示一个加载栏（类似 YouTube）。它也可以手动触发。

用法

QAjaxBar 组件会自动捕获 Ajax 调用（除非告诉它不要）。

下面的示例仅出于演示目的手动触发事件。它设置为出现在页面底部（提供多个位置！），大小为 10px（默认大小不同），并使用自定义颜色。

基本

请查看 API 部分，了解您可以使用的所有属性。

Ajax 过滤器

v2.4.5+

如果您希望 QAjaxBar 仅对某些 URL（而不是所有 URL，如默认行为）触发，则可以使用 hijackFilter 属性

<template>
  <q-ajax-bar :hijack-filter="myFilterFn" />
</template>

<script>
export default {
  setup () {
    return {
      myFilterFn (url) {
        // example (only https://my-service.com/* should trigger)
        return /^https:\/\/my-service\.com/.test(url)
      }
    }
  }
}
</script>

技巧

• 如果 Ajax 栏同时捕获了多个事件，@start 和 @stop 仍将仅触发一次：当栏开始显示时，以及当它变为隐藏时。
• 每次触发 Ajax 调用都会进行 start() 调用。调用结束后，它会调用 stop()。因此，是的，如果您也手动触发 QAjaxBar，则必须在每次新事件开始时调用 start()，并在每次事件结束后调用 stop()。QAjaxBar 知道如何同时处理多个事件。
• 自动捕获旨在专门用于使用 XMLHttpRequest (XHR) 的库。因此，如果您选择使用原生浏览器 Fetch API，它不会自动启动加载栏。