How to use Promise.all using Axios Async Await

Question

I have this Axios Async Await code in Nuxt.js, I am not sure on how and where to put the Promise.all here. I am trying to promise the getThemes() and getData(). Could somebody help me with the Promise.all code?

And do I have to put the Promise.all in the mounted()?

mounted() {
    this.getData(this.$route.params.id);
    this.getThemes();
  },

  methods: {
    async getThemes() {
      this.loading = true;
      await axios.get(`${process.env.API_URL}/v1/communication/email-themes`, {}).then((response) => {
        this.theme = response.data.data;
        this.selected = this.theme.filter(t => this.themeId === t.id)[0].id;
        this.loading = false;
      }).catch((error) => {
        this.loading = false;
        this.errormsg = error.response.data.message;
      });
    },

    async getData(id) {
      this.loading = true;
      await axios
        .get(`${process.env.API_URL}/v1/communication/email-templates/${id}`)
        .then(({
          data
        }) => {
          this.templateName = data.data.name;
          this.templateCode = data.data.content;
          this.themeId = data.data.theme_id;
          this.loading = false;
        }).catch((error) => {
          this.loading = false;
          this.errormsg = error.response.data.message;
        });
    },

    async patchData(id) {
      await axios.put(`${process.env.API_URL}/v1/communication/email-templates/${this.$route.params.id}`, {
        name: this.templateName,
        content: this.templateCode,
        theme_id: this.selected
      }).then((response) => {
        this.results = response.data;
        this.loading = false;
      }).catch((error) => {
        this.loading = false;
        this.errormsg = error.response.data.message;
      });
    }
  }

Answer 1

A Promise which will be resolved with the value returned by the async function, or rejected with an uncaught exception thrown from within the async function.

Reference - Async function

So you can do it as follows

{
  mounted() {
    this.loading = true;
    Promise.all([this.getThemes(), this.getData(this.$route.params.id)])
      .then(values => {
        //first return value
        this.theme = values[0];
        this.selected = this.theme.filter(t => this.themeId === t.id)[0].id;
        //second return value
        this.templateName = values[1].name;
        this.templateCode = values[1].content;
        this.themeId = values[1].theme_id;

        this.loading = false;
      })
      .catch(error => {
        this.errormsg = error.response.data.message;
        this.loading = false;
      });
  },
  methods: {
    async getThemes() {
      const response = await axios.get(
        `${process.env.API_URL}/v1/communication/email-themes`,
        {}
      );
      return response.data.data;
    },
    async getData(id) {
      const response = await axios.get(
        `${process.env.API_URL}/v1/communication/email-templates/${id}`
      );

      return response.data.data;
    }
  }
};

Then use Promise.all passing the two async functions in an array as an argument.

Answer 2

I suppose you want to wait for both getThemes and getData to be finished:

   mounted() {
     this.loadData();
   },
   methods: {
     async loadData() {
       this.loading = true
       try {
         await Promise.all([this.getThemes(), this.getData(this.$route.params.id)])
       } catch (error) {
         this.errormsg = error.message;
       } finally {
         this.loading = false
       }
     }
    getThemes() {
       return axios.get(`${process.env.API_URL}/v1/communication/email-themes`, {
       }).then((response) => {
         this.theme = response.data.data;
         this.selected = this.theme.filter(t => this.themeId === t.id)[0].id;
       })
     },

    getData(id) {
       return axios
         .get(`${process.env.API_URL}/v1/communication/email-templates/${id}`)
         .then(({ data }) => {
           this.templateName = data.data.name;
           this.templateCode = data.data.content;
           this.themeId = data.data.theme_id;
         })
    },
  }