javascript - How to await a subscribe in angular - Stack Overflow

admin管理员组

文章数量:1332889

my question is very simple... Consider the following angular method:

fillOrderHeader() {
    let rows3:Array<OrderHeader>= new Array<OrderHeader>();
    this.orderService.getAllOrdersHeaders().subscribe(headerList=>{
      headerList.forEach(headerDoc=>{
        headerDoc.get().subscribe(header=>{
          let headerMetadata:OrderHeader= new OrderHeader();
          headerMetadata.clientName= header.data().clientName;
          headerMetadata.agencyName=header.data().agencyName;
          rows3.push(headerMetadata);
        });
      })
    });
    return rows3;
  }

How to await to subscription before to return a row3 array?

Many thanks!

my question is very simple... Consider the following angular method:

fillOrderHeader() {
    let rows3:Array<OrderHeader>= new Array<OrderHeader>();
    this.orderService.getAllOrdersHeaders().subscribe(headerList=>{
      headerList.forEach(headerDoc=>{
        headerDoc.get().subscribe(header=>{
          let headerMetadata:OrderHeader= new OrderHeader();
          headerMetadata.clientName= header.data().clientName;
          headerMetadata.agencyName=header.data().agencyName;
          rows3.push(headerMetadata);
        });
      })
    });
    return rows3;
  }

How to await to subscription before to return a row3 array?

Many thanks!

• javascript
• angular
• typescript

Share Improve this question Follow asked Oct 4, 2018 at 19:49 AlejoDevAlejoDev 3,1981111 gold badges4040 silver badges6767 bronze badges 2

• 1 You need to convert the observable to a promise, there is an rxjs operator for this, and await the result. Then use await instead of the .subscribe. – Aluan Haddad Commented Oct 4, 2018 at 19:53
• @AluanHaddad Ok, how?... Many thanks! – AlejoDev Commented Oct 4, 2018 at 19:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

async/await can only work with Promises. So to make it work in your example, you'll have to change your Observable(s) into Promise(s).

Good thing though is, you can simply use the toPromise API on an Observable for doing that.

Another thing that you'll have to do is declare your fillOrderHeader function as async. To do that you'll have to await the calls to this.orderService.getAllOrdersHeaders().toPromise() and headerDoc.get().toPromise()

Try this:

async fillOrderHeader() {

  let rows3: Array<OrderHeader> = new Array<OrderHeader>();
  const headerList = await this.orderService.getAllOrdersHeaders().toPromise();

  for(let headerDoc of headerList) {

    const header = await headerDoc.get().toPromise();

    let headerMetadata: OrderHeader = new OrderHeader();
    headerMetadata.clientName = header.data().clientName;   
    headerMetadata.agencyName = header.data().agencyName;

    rows3.push(headerMetadata);      
  }
  return rows3;
}

try this:

async fillOrderHeader() {
   let rows3: Array<OrderHeader>= new Array<OrderHeader>();

   let headerList = await this.orderService.getAllOrdersHeaders().toPromise();
   for(let headerDoc of headerList){
       let header = await headerDoc.get().toPromise();
       let headerMetadata: OrderHeader = new OrderHeader();
       headerMetadata.clientName  = header.data().clientName;
       headerMetadata.agencyName = header.data().agencyName;
       rows3.push(headerMetadata);
   }

   return rows3;
 }

本文标签： javascriptHow to await a subscribe in angularStack Overflow