I have been migrating a personal website from a VanillaJS solution to Vue to better separate the concerns of different components and also get more experience with Vue.

The website loads data from two different json files and then builds a table. The current solution uses an XMLHttpRequest object with callback functions to load the data. This was needed originally because the Promise concept was not available across all the browsers I needed to support. I probably could have used a polyfill, but that would have added more complexity to the solution and more code to download.

Promises are now supported across all the browsers that I need to support. So, instead of using callback functions, I switched to a Promise-based solution for loading the json files on startup. Now I had two problems: still needing to load the data and, now, running asynchronous code during app startup.

I had originally wanted to use async/await which would have required the async usage of the created lifecycle hook. However, my understanding of async/await from C# does not match how it works in Javascript and only one of the calls completed successfully and the other call seemed to never complete.

So, instead of the async/await construct, I switched to the former method of using the .then() continuation functions and I moved the loading into the mounted lifecycle hook. However, I still had the problem where only one of the calls would complete.

I found that it is possible to stitch together multiple Promises using Promises.allSettled(). This method takes an array of Promises and returns a new Promise that resolves when all of the original Promises have either succeeded or errored out.

Now I have something like the following:

mounted() {
Promise.allSettled(
  [
    fetchJSON('data1.json')
      .then(response => {
        // data1 processing
      }),
    fetchJSON('data2.json')
      .then(response => {
        // data2 processing
      })
  ])
  .then(result => this.isLoaded = true);
}