Ajax 进度栏

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

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

QAjaxBar API

用法

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

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

基础

<template>
  <div class="q-pa-md">
    <q-ajax-bar
      ref="bar"
      position="bottom"
      color="accent"
      size="10px"
      skip-hijack
    />

    <q-btn color="primary" label="Trigger" @click="trigger" />
  </div>
</template>

过滤 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。