[Vuejs]-Vue call all mounted functions (API calls) simultaneously

2👍

You need to use Promise.all and run the API call individually with an async function.

this.loading=true;
Promise.all([this.getRequestTypes, this.getReports, this.getQuotes]).then((values) => {
  console.log(values);
  this.loading = false;
});

The methods should be async.

getReports: async function (date = this.date, requestType = 0) {
       await this.$http.get('/reports/month/' + date + '/' + requestType)
          .then(function (response) {
          }.bind(this))
    },
    getQuotes: async function (date = this.date2, requestType = 0) {
      await this.$http.get('/reports/quote/month/' + date + '/' + requestType)
          .then(function (response) {
            console.log(response.data)
          }.bind(this))
    },
    getRequestTypes: async function () {
      await this.$http.get('/addresses/requesttypesreports')
          .then(function (response) {
            this.itemsRequestTypes = response.data
          }.bind(this))
    },

1👍

You can use Promise.all() using async function

mounted: function () {
    this.getAllReports()
  },
  methods:{
     getAllReports: function() {
            this.loading = true;
            Promise.all([this.getRequestTypes(), this.getReports(), this.getQuotes()])
           .then(data => {
              // Use data here
              this.loading = false;
            })
          .catch(err => {
            // user err to display message
            this.loading = false;
          });
     }
  }

And update all three functions like below

//-----------v------------
getReports: async function (date = this.date, requestType = 0) {
      this.loading = true
//------v------------
      await this.$http.get('/reports/month/' + date + '/' + requestType)
          .then(function (response) {
          }.bind(this))
    },

Leave a comment