Angular请求同步async、await使用方式

原创于 2018-11-20 16:39:16 发布 · 9.2w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#angular请求同步

Angular 同时被 2 个专栏收录

8 篇文章

订阅专栏

Angular

5 篇文章

订阅专栏

本文通过一个Angular应用实例，展示了在组件构造函数中使用异步HTTP请求加载数据的执行顺序。具体分析了从构造函数调用到数据加载完成，再到页面渲染的整个流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

啥也不说，贴出代码，看执行顺序。

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;
  }
}