axios getting/posting 请求时加载栏

Question

我正在尝试使用 Vue ProgressBar 在我的项目上创建一个加载栏，它在我的路线上有效，但在 Axios 获取或发布请求时不起作用。

这是我启动加载栏时的项目代码，

<script>
    import Swal from 'sweetalert2';
    import Editor from '@tinymce/tinymce-vue';
    export default {
        components: {
            'editor': Editor
        },
        title() {
            return 'Stock group data';
        },
        data() {
            return {
                stockgroup: {},
                user: {},
            }
        },
        created() {
            this.$Progress.start();
            this.loadDataWarehouse();
            this.loadUser();
            this.$Progress.finish();
        },
        methods: {
            async loadDataWarehouse() {
                const response = await axios.get('/api/stock-group/' + this.$route.params.id);
                this.stockgroup = response.data;
            },
            async loadUser() {
                const resp = await axios.get('/api/contact-list');
                this.user = resp.data;
            },
        },
    }

</script>

this.$Progress.start() 行是执行加载栏的地方。

但在我这样做之前，我已经阅读了我们必须在默认 Vue 应用程序上添加代码的文档。我的意思是像 App.vue

所以我将此代码添加到我的 App.vue

但是当我运行它并请求获取数据时，我不知道为什么它不显示加载栏。你可以在这里看到它。

有人能帮帮我吗？请...

Answer 1

您正在查看正在调用的 async 个函数！

事实上，您正在做的是显示进度条，并在调用两个 async 函数后很快将其隐藏。

这里有两个选择。

使 hook async 和 await inside.

created: async () => {
 this.$Progress.start();
 // wait for the async to finish
 await this.loadDataWarehouse();
 await this.loadUser();
 // then hide the progress bar
 this.$Progress.finish();
},

或

将两者都推入 promises 数组并等待 - 这在可读性方面并不那么优雅，但在性能方面可能会更好，因为它不会等待第一个承诺return 与选项 1 不同，执行第二个承诺。

created: () => {
 // promises array
 let promises = [];
 // this context
 const self = this;
 this.$Progress.start();
 // push into the array
 promises.push(this.loadDataWarehouse());
 promises.push(this.loadUser());
 // then hide the progress bar
 Promise.all(promises).then(()=>{
   self.$Progress.finish();
 })
},

Answer 2

如果您希望在每个请求上显示进度条而无需重复开始和结束代码。你可以尝试使用 axios interceptor

this.axios.interceptors.request.use(config => {
this.$Progress.start(); 
    return config;
});
this.axios.interceptors.response.use(
    response => {
        this.$Progress.finish(); 
        return Promise.resolve(response);
    },
    error => {
        this.$Progress.finish(); 
        return Promise.reject(error);
    }
);

axios getting/posting 请求时加载栏

Loading bar when axios getting/posting request

javascript

progress-bar

vue.js