Javascript axios获取/发布请求时加载条

我正在尝试使用在我的项目上创建一个加载条，它在我的路线上工作，而当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>

从“sweetalert2”进口棉签；
从“@tinymce/tinymce vue”导入编辑器；
导出默认值{
组成部分：{
“编辑器”：编辑器
},
标题（）{
返回“股票组数据”；
},
数据（）{
返回{
股票组：{}，
用户：{}，
}
},
创建（）{
这是。$Progress.start（）；
这是loadDataWarehouse（）；
this.loadUser（）；
这是。$Progress.finish（）；
},
方法：{
异步加载数据仓库（）{
const response=wait axios.get（'/api/stock group/'+this.$route.params.id）；
this.stockgroup=response.data；
},
异步加载用户（）{
const resp=wait axios.get（'/api/contact list'）；
this.user=resp.data；
},
},
}

this.$Progress.start（）

行是执行加载条的位置

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

App.vue

因此，我将此代码添加到我的

App.vue

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

有人能帮我吗？

---

请……

您正在查看正在调用的

异步

函数

事实上，您正在做的是，在调用两个

async

函数后立即显示进度条并隐藏它

你有两个选择

使

hook

异步，并在内部执行

wait

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中那样等待第一个承诺返回以执行第二个承诺

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

---

您正在查看正在调用的

async

函数

事实上，您正在做的是，在调用两个

async

函数后立即显示进度条并隐藏它

你有两个选择

使

hook

异步，并在内部执行

wait

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中那样等待第一个承诺返回以执行第二个承诺

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

---

如果希望progressbar在每个请求上显示，而不需要重复开始和完成代码。您可以尝试使用axios拦截器

this.axios.interceptors.request.use（配置=>{
这是。$Progress.start（）；
返回配置；
});
this.axios.interceptors.response.use(
响应=>{
这是。$Progress.finish（）；
回报承诺。解决（回应）；
},
错误=>{
这是。$Progress.finish（）；
返回承诺。拒绝（错误）；
}
);

如果您希望在每个请求上显示progressbar，而无需重复开始和完成代码。您可以尝试使用axios拦截器

this.axios.interceptors.request.use（配置=>{
这是。$Progress.start（）；
返回配置；
});
this.axios.interceptors.response.use(
响应=>{
这是。$Progress.finish（）；
回报承诺。解决（回应）；
},
错误=>{
这是。$Progress.finish（）；
返回承诺。拒绝（错误）；
}
);

请不要将代码添加为屏幕截图。当你把代码添加为截图时，很难阅读和理解好的，先生，我的错。谢谢，先生，请不要将代码添加为截图。当你把代码添加为截图时，很难阅读和理解好的，先生，我的错。谢谢你，先生。。太好了，先生。。。这对我有用，先生。。谢谢你，先生……哇。。太好了，先生。。。这对我有用，先生。。谢谢你，先生…我可以在哪里加上？在main.php或app.jss sir上？您可以将其添加到app.vue中创建的生命周期中，甚至添加到main.js文件中，但不使用

this

关键字，而是使用axios本身。您将尝试此sir。我稍后会接受这个答案的，先生。先生，谢谢你帮助我^_^是的，没问题，祝你好运：先生，我可以在这里加上吗？在main.php或app.jss sir上？您可以将其添加到app.vue中创建的生命周期中，甚至添加到main.js文件中，但不使用

this

关键字，而是使用axios本身。您将尝试此sir。我稍后会接受这个答案的，先生。先生，谢谢你帮助我^_^是的，没问题，祝你好运：D