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

或

2. 将两者都推入

   promises

   数组并等待 - 这在可读性方面不是那么优雅，但在性能方面可能会更好，因为它不像选项 1 那样等待第一个 promise 返回来执行第二个 promise .

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