美文网首页
Angular请求同步async、await、toPromise

Angular请求同步async、await、toPromise

作者: Bager | 来源:发表于2020-04-13 09:22 被阅读0次

    最近项目中遇到一个问题,需要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对象。

    相关文章

      网友评论

          本文标题:Angular请求同步async、await、toPromise

          本文链接:https://www.haomeiwen.com/subject/ciitmhtx.html