[英]How to use Promise.all using Axios Async Await
I have this Axios Async Await code in Nuxt.js, I am not sure on how and where to put the Promise.all
here.我在 Nuxt.js 中有这个 Axios Async Await 代码,我不确定如何以及将
Promise.all
这里。 I am trying to promise the getThemes()
and getData()
.我试图承诺
getThemes()
和getData()
。 Could somebody help me with the Promise.all
code?有人可以帮助我使用
Promise.all
代码吗?
And do I have to put the Promise.all
in the mounted()
?我是否必须将
Promise.all
放在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;
});
}
}
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.
一个Promise ,它将使用 async 函数返回的值进行解析,或者被 async 函数中抛出的未捕获异常拒绝。
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.然后使用
Promise.all
将数组中的两个异步函数作为参数传递。
I suppose you want to wait for both getThemes
and getData
to be finished:我想你想等待
getThemes
和getData
完成:
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;
})
},
}
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.