最近項(xiàng)目中遇到一個(gè)問題，需要angular發(fā)送多個(gè)同步請(qǐng)求，解決方案如下：

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 執(zhí)行完成')
    });
  }
  async initData(){
    let data = await this.getData();
    console.log(data);
    console.log('initData 執(zhí)行完成');
    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 執(zhí)行完成');
    return data;
  }
}

console.log順序：

1、getData 執(zhí)行完成
2、initData 執(zhí)行完成
3、constructor 執(zhí)行完成

說明：

1、調(diào)用的最外層函數(shù)中使用 async 修飾；
2、在方法體中，使用 await 修飾要發(fā)送的同步請(qǐng)求；
3、getData 方法是為了返回同步請(qǐng)求的res。toPromise，將res轉(zhuǎn)成Promise對(duì)象。