axios获取/发布请求时加载栏

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

如果您希望在每个请求上都显示进度条，而无需重复开始和结束代码。你可以尝试使用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);
    }
);

Answer 2

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

实际上，您正在做的是，在调用两个 async 函数后显示进度条并立即隐藏它。

这里有两种选择。

1. 将hook 和await 放在里面。

   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();
   },
   

或

1. 将两者都推入 promises 数组并等待 - 这在可读性方面并不优雅，但在性能方面可能会更好，因为它不像选项中那样等待第一个承诺返回执行第二个承诺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();
    })
   },