インターフェイスが呼び出されたときの自動ロード (グローバル)

この機能は、インターフェースを呼び出す前にローディングを表示し、インターフェースリクエスト終了後にローディングを非表示にすることで実現できます。

たとえば、毎回インターフェイスを呼び出す前に、グローバルロードコンポーネントを表示して、データがロードされていることをユーザーに思い出させることができます。インターフェースリクエストが終了したら、ロード中のコンポーネントを非表示にします。

特定の実装方法では、最初にプロジェクトのグローバル設定で読み込みコンポーネントを定義し、インターフェイスを呼び出す前にそれを表示し、次にインターセプターを使用してインターフェイス要求のステータス変化を監視し、インターフェイス要求が成功または失敗した後に読み込みコンポーネントを非表示にすることができます。

// 在项目全局定义loading组件

<template>
  <div class="loading" v-show="isLoading">
    <svg viewBox="0 0 32 32" width="32" height="32" fill="#333">
      <circle transform="translate(8 0)" cx="0" cy="16" r="0">
        <animate attributeName="r" values="0; 4; 0" dur="1.2s" repeatCount="indefinite"></animate>
        <animate attributeName="cx" values="0; 8; 16; 8; 0" dur="1.2s" repeatCount="indefinite"></animate>
      </circle>
      <circle transform="translate(16 0)" cx="0" cy="16" r="0">
        <animate attributeName="r" values="0; 4; 0" dur="1.2s" repeatCount="indefinite"></animate>
        <animate attributeName="cx" values="0; 8; 16; 8; 0" dur="1.2s" repeatCount="indefinite"></animate>
      </circle>
      <circle transform="translate(24 0)" cx="0" cy="16" r="0">
        <animate attributeName="r" values="0; 4; 0" dur="1.2s" repeatCount="indefinite"></animate>
        <animate attributeName="cx" values="0; 8; 16; 8; 0" dur="1.2s" repeatCount="indefinite"></animate>
      </circle>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    showLoading() {
      this.isLoading = true
    },
    hideLoading() {
      this.isLoading = false
    }
  }
}
</script>

// 在拦截器中监听接口请求状态变化

import loading from './loading.vue'

// 请求拦截器
axios.interceptors.request.use((config) => {
  loading.methods.showLoading() // 显示loading组件
  return config
}, (error) => {
  loading.methods.hideLoading() // 隐藏loading组件
  return Promise.reject(error)
})

// 响应拦截器
axios.interceptors.response.use((response) => {
  loading.methods.hideLoading() // 隐藏loading组件
  return response
}, (error) => {
  loading.methods.hideLoading() // 隐藏loading组件
  return Promise.reject(error)
})

この方法では、毎回インターフェイスを呼び出す前にロードコンポーネントが表示され、データがロードされていることをユーザーに知らせます。インターフェイスのリクエストが完了すると、ロードコンポーネントは非表示になり、ユーザーは完全なコンテンツを確認できるようになります。

インターフェイスが呼び出されたときの自動ロード (グローバル)

おすすめ