So führen Sie eine GET-Anforderung mit HttpClientModule ordnungsgemäß aus

Question

Ich habe Probleme mit der Ausführung einer einfachen Get-Anforderung an das Back-End, die einen JSON zurückgibt. Wenn ich diese Get-Anforderung in meinem Code ausführe, gibt es eine Observable zurück, die ich direkt einer Variablen über die subscribe-Methode zuweise. Es ist jedoch nur assanged und verfügbar innerhalb dieser Methode und undefined überall sonst.

Die api Service get-Methode:

public getAllProcessCategories() { 
    return this.http.get(this.apiURL + 'typeOne=PROCESSCATEGORIES&typeTwo=PROCESSCATEGORIES'); 
    } 

Die Nutzung der api:

import { ApiService } from './../api.service'; 
import { Component, OnInit } from '@angular/core'; 
import { HttpClient, HttpHeaders } from '@angular/common/http'; 
import { ProcessCategory } from './process-category'; 



@Component({ 
    selector: 'app-process-category', 
    templateUrl: './process-category.component.html', 
    styleUrls: ['./process-category.component.css'] 
}) 
export class ProcessCategoryComponent implements OnInit { 

    processCategories = []; 

    constructor(private api: ApiService) { 
    } 


    ngOnInit(): void { 
    this.fillProcessCategories(); 
    this.printAfterRequest(); 
    } 

    fillProcessCategories() { 
    this.api.getAllProcessCategories().subscribe(data => { 
     this.processCategories = data['entities']; 
     console.log(this.processCategories); 
    }); 
    } 

    printAfterRequest() { 
    for (const category of this.processCategories) { 
      console.log(category); 
    } 
    } 
} 

Iknow dass es ist, weil ich das Ergebnis erhalten möchten, bevor Httprequest beendet ist. Also, was ist der beste Weg, um eine Get-Anfrage in Winkel 4 durchzuführen, die einen JSON zurückgibt und dann diesen JSON analysiert und ihn einer Klasse zur Verwendung in meiner Komponente zuordnet?

Answer 1

zwicken leicht Ihre API-Methode

return this.http.get(this.apiURL+ 'typeOne=PROCESSCATEGORIES&typeTwo=PROCESSCATEGORIES') 
       .map(res => { 
        return res.json(); 
       }) 
       .catch(this.handleError); 

Dann printAfterRequest bewegen Rückruf abonnieren

fillProcessCategories() { 
    this.api.getAllProcessCategories().subscribe(data => { 
     this.processCategories = data['entities']; 
     this.printAfterRequest(); 
     console.log(this.processCategories); 
    }); 
    }