如何在 Javascript 中进行多个异步调用来更新我的 UI 而不阻塞？

Question

我在网页上有几个下拉列表，它们通过 api 调用服务器来检索它们的内容，这些都非常快，还有一个额外的调用从数据库中检索 1000 行 - 相当长的响应时间.我有这个 Javascript/Vue 代码，它在所有内容都加载完毕并准备就绪时运行：

setOrderStatuses: async function () {
    ...
},
setSpecialOrders: async function () {
    ...
},
setSubmitterNames: async function () {
    ...
},
...
mounted: function () {
   this.$nextTick(async function () {
      return await Promise.all([
         this.setOrderStatuses(),
         this.setSpecialOrders(),
         this.setSubmitterNames()
      ]);
   });
},

...其中一切都按预期检索数据，但是 UI 直到 all 的承诺都得到履行后才会更新。例如，如果我在服务器上放置一个断点来阻止对 setOrderStatuses() 的回答，那么其他方法都不会更新 UI，直到我单击 continue 并且承诺被填充。

Answer 1

jus 让你的 mouted 方法像 :

一样异步

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

如何在 Javascript 中进行多个异步调用来更新我的 UI 而不阻塞？

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

javascript

parallel-processing

vuejs2