Ajax 进度栏

绝大多数移动应用和桌面应用都需要通过 Ajax call 来与服务端进行通信。 由于通信过程可能需要花费部分时间，为了好的用户体验，您可以在一个请求开始时使用 QAjaxBar 组件来给予用户反馈。

QAjaxBar 是一个用于自动展示 Ajax 请求进度的组件，当然也可以手动触发。

QAjaxBar API

用法

QAjaxBar 组件默认会自动捕获 Ajax 调用，然后展示它的进度。(除非您禁止了它的自动捕获)。

出于演示的目的，下面的示例是使用手动触发的方式。当您点击按钮的时候页面的底部会出现一个 10px 左右的进度条，当然他的大小和颜色都是可以自定义的， 请查阅 API 部分以帮助您了解它的所有属性。

基础

过滤 Ajax 请求

v2.4.5+

默认会捕获所有的 ajax 请求，如果您想它只捕获指定的请求，可以使用 hijackFilter 属性来实现:

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

<script>
export default {
  setup () {
    return {
      myFilterFn (url) {
        // 例如： (只有请求 https://my-service.com/* 这个地址时才会触发
        return /^https:\/\/my-service\.com/.test(url)
      }
    }
  }
}
</script>

提示

• 如果 Ajax Bar 同时捕获多个事件，@start 和@stop 仍然只会触发一次
• 每个 Ajax 请求开始时都会触发 start() 事件结束的时候都会触发 stop() 事件。所以若您想要手动的触发 QAjaxBar，您需要在请求开始的时候去调用他的 start() 方法，在请求结束的时候去调用他的 stop() 方法。
• 只有使用 XMLHttpRequest (XHR). 时 Ajax Bar 才会自动捕获，如果你使用浏览器原生的 Fetch API 则不会自动触发 Ajax Bar。