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

左手的ㄟ右手 2023-02-22 05:07 10阅读 0赞

原文出处：[https://blog.csdn.net/inforstack/article/details/84305087?utm\_medium=distribute.pc\_relevant.none-task-blog-baidujs-1][https_blog.csdn.net_inforstack_article_details_84305087_utm_medium_distribute.pc_relevant.none-task-blog-baidujs-1]  
啥也不说，贴出代码，看执行顺序。

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_inforstack_article_details_84305087_utm_medium_distribute.pc_relevant.none-task-blog-baidujs-1]: https://blog.csdn.net/inforstack/article/details/84305087?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200701173731105.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70