javascript - 视觉 : Display Loader when request is in progress

Question

我想实现如下流程:

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

Answer 1

I assume that you want to show a loader when a http request is on progress.

<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>

请注意，我使用的是 axios在示例中，但逻辑适用于其他 htpp 库或 fetch