How do I make multiple async calls in Javascript to update my UI without blocking?-CodePudding

I have several dropdownlists on a web page that retrieve their contents via api call to the server, which are all very quick, and an additional call that retrieves 1000 rows from the database - considerably longer response time. I have this Javascript/Vue code that runs when everything is loaded and ready to go:

setOrderStatuses: async function () {
    this.orderStatusesLoading = true;
    this.orderStatuses = await this.getOrderStatuses();
    this.orderStatusesLoading = false;
},
setSpecialOrders: async function () {
    this.specialOrdersAreLoading = true;
    this.specialOrders = await this.getSpecialOrders();
    this.specialOrdersAreLoading = false;
},
setSubmitterNames: async function () {
    this.submitterNamesLoading = true;
    this.submitterNames = await this.getSubmitters();
    this.submitterNamesLoading = false;
},
...
mounted: function () {
   this.$nextTick(async function () {
      return await Promise.all([
         this.setOrderStatuses(),
         this.setSpecialOrders(),
         this.setSubmitterNames()
      ]);
   });
},

...wherein everything retrieves data as expected, but the UI doesn't update until all of the promises are fulfilled. If I put a breakpoint on the server that blocks the answer to setOrderStatuses(), for instance, neither of the other methods update the UI until I click continue and the promise is filled.

CodePudding user response：

jus make your mouted method async like :

async mounted () {
   await this.setOrderStatuses()
   await this.setSpecialOrders()
   await this.setSubmitterNames()
}