4

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; }); } }
Improve this question
6
  • 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. 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. 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. 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. 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`, {}). Commented Jul 18, 2018 at 9:29

3 Answers 3

Reset to default
15

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

you can put this.loading = false in a then(...) after catch(...) which works similar to always(...) in jQuery: .then( values => { ...}).catch( error => {...}).then( () => { this.loading = false; });
3 
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);
Improve this answer

1 Comment

I want to just comment here for anyone looking for the answer, that this should really be the accepted answer. Axios has this stuff built in. Unfortunately, the accepted answer reinvents the wheel and results in bad coding practices and bloat.
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; }) }, }
Improve this answer

2 Comments

Thank you for replying and it seems that is the way to do it, but I have another problem now, there is a console error stating "Uncaught (in promise) TypeError: Cannot read property 'data' of undefined at _id.vue?e97a:100" The error was in "this.errormsg = error.response.data.message;" inside the async loadData(). Could you help me a bit more?
I tried the code and sometimes it works but sometimes it shows the error, just like my previous code.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.