Angular 2 - Wie man HTTP bekommen Anfrage zu Ruhe API und speichern in JSON-Objekt

Question

Ich versuche, Anfrage an Github API in Angular2, die Daten sind im JSON-Format zu bekommen, ich muss nur in einem JSON speichern Objekt.

In der Angular2 Dokumentation

getHeroes(): Observable<Hero[]> { 
    return this.http.get(this.heroesUrl) 
        .map(this.extractData) 
        .catch(this.handleError); 

Da der Held [] Variable kann nicht für die api wie in der Dokumentation definiert werden, wo es id und Namen hat, wie kann ich eine beobachtbare Funktion erstellen, um Daten zu erhalten und speichern Sie es in einem Objekt.

In Angular 1.5 Ich habe es getan, wie dieser

var urlBase = 'https://api.github.com/search/repositories?q='; 
    var SearchOp = {}; 
    SearchOp.getRepositories = function (search) { 
     SearchOp = $http.get(urlBase+ search +'&sort=star&order=desc&per_page=5') 
     return SearchOp; 
    }; 

ich es tue, wie diese

search (term: string) { 

    let gitUrl = 'https://api.github.com/search/repositories'; 
    let params = new URLSearchParams(); 
    params.set('q', term); 

    let result = this.http 
       .get(gitUrl, { search: params }) 
       .map(request => request.json()); 
       console.log(result); 
       return result; 
    } 

aber in der Konsole Ich erhalte

‚Observable {_isScalar : false, Quelle: Observable, Operator: MapOperator} '

Nicht das korrekte Ergebnis

Answer 1

Der Anruf http.get() ist asynchron. Das bedeutet request => request.json ist ein Rückruf, der zu map(...) hinzugefügt wird, der aufgerufen wird, wenn die Antwort vom Server eintrifft. Der HTTP-Aufruf wird zur späteren Ausführung in die Ereigniswarteschlange des Browsers eingereiht und verarbeitet den Code sofort in Ihrer search-Methode weiter.

Daher wird console.log(result) aufgerufen, noch bevor der Anruf an den Server gesendet wurde.

Um Code ausgeführt werden, wenn die Daten ankommen, bewegen sie innerhalb map(...)

return this.http 
      .get(gitUrl, { search: params }) 
      .map(request => { 
      request.json() 
      console.log(result); 
      // return result; // doesn't work 
      }); 

Sie können auch nicht nur die result zurück, weil, wenn die Funktion beendet ist, die result noch nicht verfügbar ist.

Mit dem obigen Code result bekommt man eine Observable zugewiesen, die man abonnieren kann.

Zum Beispiel diese Linie die Antwort auf this.data zuweist, wenn es ankommt

this.search(term).subscribe(data => this.data = data);