最近项目中遇到一个问题,需要angular发送多个同步请求,解决方案如下:
import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(private client:HttpClient){
this.initData().then(data => {
console.log(data);
console.log('constructor 执行完成')
});
}
async initData(){
let data = await this.getData();
console.log(data);
console.log('initData 执行完成');
return data;
}
getData(){
let url = 'https://tieba.baidu.com/hottopic/browse/topicList';
let data = this.client.get(url).toPromise();
console.log(data);
console.log('getData 执行完成');
return data;
}
}
console.log顺序:
1、getData 执行完成
2、initData 执行完成
3、constructor 执行完成
说明:
1、调用的最外层函数中使用 async 修饰;
2、在方法体中,使用 await 修饰要发送的同步请求;
3、getData 方法是为了返回同步请求的res。toPromise,将res转成Promise对象。
网友评论