Javascript 如何在 Vue.js 中使用 async/await？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54955426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use async/await in Vue.js?
提问by USER
I'm new in ES7
我是 ES7 新手
I want to use async/await in Vue.js
我想在 Vue.js 中使用 async/await
Here is my code
这是我的代码
created (){
this.getA()
console.log(2)
this.getB()
},
methods : {
getA (){
console.log(1)
},
getB (){
console.log(3)
}
}
It returns
它返回
1
2
3
But when I use it with axios, then
但是当我将它与 axios 一起使用时，然后
created (){
this.getA()
console.log(2)
this.getB()
},
methods : {
getA (){
$axios.post(`/getA`,params){
.then((result) => {
console.log(1)
})
},
getB (){
console.log(3)
}
}
It returns
它返回
2
3
1
So I want to add async/await in that code.
所以我想在该代码中添加 async/await。
How can I use async/await?
如何使用异步/等待？
I tried
我试过
async created (){
await this.getA()
console.log(2)
await this.getB()
},
methods : {
getA (){
$axios.post(`/getA`,params){
.then((result) => {
console.log(1)
})
},
getB (){
console.log(3)
}
}
It returns same result.
它返回相同的结果。
回答by Thanthu
You have to use either thenor awaitnot both as shown belwo:
您必须使用then或await不使用两者，如下所示：
If using then
如果使用 then
created () {
this.getA().then((result) => {
console.log(1)
console.log(2)
this.getB()
})
},
methods : {
getA () {
return $axios.post(`/getA`,params);
},
getB (){
console.log(3)
}
}
If using await
如果使用 await
async created (){
await this.getA()
console.log(1)
console.log(2)
this.getB()
},
methods : {
getA : async() => {
return $axios.post(`/getA`,params);
},
getB : () => {
console.log(3)
}
}
Note that while calling getB() you don't need thenor awaitsince it is not asynchronous
请注意，在调用 getB() 时，您不需要then或await因为它不是异步的
回答by Stéphane Damon
Unlike what @thanthu said, you can use both then and await.
In your first post you only missed to add returnin the getAmethod:
与@thanthu 所说的不同，您可以同时使用 then 和 await。在你的第一篇文章，你只错过了添加return的getA方法：
async created (){
await this.getA()
console.log(2)
await this.getB()
},
methods : {
getA() {
return $axios
.post(`/getA`,params){
.then((result) => {
console.log(1)
});
},
getB() {
console.log(3)
}
}
回答by sathish kumar
try this
尝试这个
async created (){
let resultFromgetA = await this.getA()
console.log(2)
await this.getB()
},
methods : {
getA :() =>{
return $axios.post(`/getA`,params);
},
getB : async() =>{
//use await key with async calls
console.log(3)
}
}
