Vue.js 请求正在进行时显示加载器

发布于03月19日

我想实施以下流程:

当http请求正在进行时，显示加载程序.当请求完成时，隐藏加载程序.

推荐答案

我假设您希望在http请求进行时显示加载程序.

<template>

    <div>

        <div v-if="loading">
            <!-- here put a spinner or whatever you want to indicate that a request is in progress -->
        </div>

        <div v-else>
            <!-- request finished -->
        </div>

    </div>

</template>

<script>
    import axios from 'axios'

    export default {
        data: () => {
          loading: false
        },

        methods: {
          makeRequest () {
            this.loading = true //the loading begin
            axios.get('/example')
            .then(response => { ... }) // code to run on success
            .catch(error => { ... }) // code to run on error
            .finally(() => (this.loading = false)) // set loading to false when request finish
          }
        }
    }
</script>

Note that I am using 100 in the example, but the logic works with other htpp libraries or 101