web-dev-qa-db-ja.com

Vue：リクエストの進行中にローダーを表示する

以下のようなプロセスを実装したい：

Httpリクエストが進行中のとき、ローダーを表示します。リクエストが完了すると、ローダーが非表示になります。

javascriptvue.jsvue-routervuex
7
Sarina

私はあなたを理解しているかどうかはわかりませんが、私はそれを想定しています.httpリクエストが進行中のときにローダーが必要です。したがって、ロジックを表示します。

<template>

    <div>

        <div v-if="loading">
            <!-- here put a spinner or whatever you want to do when request is on proccess -->
        </div>

        <div v-if="!loading">
            <!-- here is your application code -->
        </div>

    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                loading: false
            }
        },
        methods: {
            makeRequest () {
                this.loading = true //the loading begin
                axios.get('/example')
                .then(response => {
                    this.loading = false //the loading stop when the response given from server
                    //do whatever with response
                })
                .catch(error => {
                    this.loading = false
                    //do whatever with response
                })
            }
        }
    }
</script>

ご理解いただければ幸いです。詳細については、httpリクエストを送信するためにaxiosを使用していますが、どちらの場合もv-ifを使用していますが、2番目のdivではv-elseを使用できます

13
roli roli

Nuxt.jsユーザーのみ

roliが書いた例はすばらしいですが、理想的には要求するたびに自分を繰り返したくないです。だから私はあなたにこのようにすることをお勧めします： https://stackoverflow.com/a/58084093/1031297

['@ nuxtjs/axios'] ....を追加します.

追加または変更plugins/axios.js

export default ({ app, $axios ,store }) => {      
  $axios.interceptors.request.use((config) => {
    store.commit("SET_DATA", { data:true, id: "loading" });
    return config;
  }, (error) => {
    return Promise.reject(error);
  });

  $axios.interceptors.response.use((response) => {
    store.commit("SET_DATA", { data:false, id: "loading" });
    return response;
  }, (error) => {
    return Promise.reject(error);
  });
}

店舗の場合

export default {
  state: () => ({
    loading: false
  }),
  mutations: {
    SET_DATA(state, { id, data }) {
      state[id] = data
    }
  },
  actions: {

  }
}
0
OWADVL