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;
      });
    }
  }

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;
      });
    }
  }

• javascript
• vue.js
• promise
• nuxt.js

• I think you are asking more than one thing here, my answer solves what you are actually asking, but maybe you should avoid setting this on getThemes() and getData(), instead, just use the return value of your promises inside mounted(). Also, you are using await poorly, you shouldn't be using then nor catchbut a try catch block. – Josu Goñi Commented Jul 18, 2018 at 8:52
• Another problem in your code is that if both getThemes()' and getData()` fail, one of them will replace the errormsg from the other. You can catch both errors and concatenate them once you use Promise.all. – Josu Goñi Commented Jul 18, 2018 at 8:57
• Hi, thanks for replying, so do you think I should replace all of the methods? I'm pretty new at this Asnyc Await thing and the code above isn't mine, it was made by my co-worker and I have to fix his code. – WilTree Commented Jul 18, 2018 at 9:05
• You can start playing with my code and its mocked async requests, as you can see, there is no then. In order to catch errors, you should implement one or more `try catch' blocks. – Josu Goñi Commented Jul 18, 2018 at 9:21
• You can also replace getPromise() with your axios calls: getPromise(1) would become axios.get(`${process.env.API_URL}/v1/communication/email-themes`, {}). – Josu Goñi Commented Jul 18, 2018 at 9:29

3 Answers 3

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.

here example how to wait axios all fetch
let url1="https://stackoverflow.com";
let url2="https://stackoverflow.com/questions";
let request1=axios.get(url1);
let request2=axios.get(url2);
let [answer1,answer2]=await axios.all([request1,request2]);
console.log(answer1.data);
console.log(answer2.data);

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;
         })
    },
  }