测试代码
mounted(){
this.test();
},
methods:{
test(){
this.testapi1();
this.testapi2();
},
testapi1(){
console.log('testapi1 start');
this.$request({
url:'/api',
method:'post',
data:{}
}).then(data=>{
console.log('testapi1 data')
});
console.log('testapi1 end')
},
testapi2(){
console.log('testapi2 start');
this.$request({
url:'/api',
method:'post',
data:{}
}).then(data=>{
console.log('testapi2 data');
});
console.log('testapi2 end');
}
}
我现在想要的预期输出结果是
testapi1 start testapi1 data testapi1 end testapi2 start testapi2 data testapi2 end
我知道应该用async配合await,但我自己试了下边两种写法都不行
- 第一种写法
async testapi1(){
console.log('testapi1 start');
await this.$request({
url:'/api',
method:'post',
data:{}
}).then(data=>{
console.log('testapi1 data')
});
console.log('testapi1 end')
}
- 输出结果
testapi1 start testapi2 start testapi2 end testapi1 data testapi1 end testapi2 data
- 第二种
async test(){
await this.testapi1();
this.testapi2();
},
- 输出结果
testapi1 start testapi1 end testapi2 start testapi2 end testapi1 data testapi2 data
请问该怎么写才能实现我要的效果?
已解决
悬赏分:30
- 解决时间 2021-11-26 17:55
点赞 0反对 0举报 0
收藏 0
分享 0
回答3
最佳
-
原则就是——在异步但需要等待的地方await,或者说是异步但需要异步执行完再往下走的地方await,这里是尽量按照你原有的代码写的,实际上request的响应是可以通过await拿到的,不需要then
{ // ... created(){ this.test(); }, methods: { async test() { await this.test1(); this.test2(); }, async test1() { console.log('test1 start'); await this.request().then(() => console.log('test1 data')); console.log('test1 end'); }, async test2() { console.log('test2 start'); await this.request().then(() => console.log('test2 data')); console.log('test2 end'); }, request() { return new Promise((resolve) => { setTimeout(() => { resolve(Math.random()); }, Math.floor(Math.random() * 100)); }); }, } }
支持 0 反对 0 举报2021-11-26 07:30
-
mounted(){ this.test(); }, methods:{ async test(){ await this.testapi1(); await this.testapi2(); }, async testapi1(){ console.log('testapi1 start'); let res = await this.$request({ url:'/api', method:'post', data:{} }) console.log('testapi1 data') console.log('testapi1 end') }, async testapi2(){ console.log('testapi2 start'); let res = await this.$request({ url:'/api', method:'post', data:{} }) console.log('testapi2 data'); console.log('testapi2 end'); } }
没测试过你看看这样子行不行
支持 0 反对 0 举报2021-11-26 09:04
-
首先你这种写法就错了 console.log('testapi1 end') 是同步执行不可能在 console.log('testapi1 data') 之后
另外 testapi1 只应该吧 return this.$request
methods:{ async test(){ await testapi1() console.log('testapi1 end') await testapi2() console.log('testapi2 end') }, testapi1(){ console.log('testapi1 start'); return this.$request({ url:'/api', method:'post', data:{} }).then(data=>{ console.log('testapi1 data') }); }, testapi2(){ console.log('testapi2 start'); return this.$request({ url:'/api', method:'post', data:{} }).then(data=>{ console.log('testapi2 data'); }); } }
支持 0 反对 0 举报2021-11-26 09:09