wake-up-neo.net

Angular 2 HTTP Get Response Beispiel

Was ist der richtige Weg, um Json-Daten von einem http-Aufruf in Angular 2 abzurufen? Ich arbeite daran, einige lokale Daten mit einem gespielten Endpunkt zu testen, und ich kann das Ergebnis in der http.get() sehen, aber ich kann es nicht lokal zuweisen oder es gibt ein Timing Problem. Hier ist mein einfacher Service:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';  // we need to import this now

    @Injectable()
    export class MyHttpService {
    constructor(private _http:Http) {}

    getDataObservable(url:string) {
        return this._http.get(url)
            .map(data => {
                data.json();
                console.log("I CAN SEE DATA HERE: ", data.json());
        });
    }
}

Und so versuche ich, die Daten zuzuweisen:

import {Component, ViewChild} from "@angular/core";

import { MyHttpService } from '../../services/http.service';

@Component({
    selector: "app",
    template: require<any>("./app.component.html"),
    styles: [
        require<any>("./app.component.less")
    ],
    providers: []
})
export class AppComponent implements OnInit, AfterViewInit {
    private dataUrl = 'http://localhost:3000/testData';  // URL to web api
    testResponse: any;

    constructor(private myHttp: MyHttpService) {
    }

    ngOnInit() {
        this.myHttp.getDataObservable(this.dataUrl).subscribe(
            data => this.testResponse = data
        );
        console.log("I CANT SEE DATA HERE: ", this.testResponse);
    }
}

Ich kann die Daten sehen, die ich im get () - Anruf haben möchte, aber ich habe nach diesem Anruf keinen Zugriff darauf. Bitte sagen Sie mir, was ich falsch mache!

17
DHW

Das soll so nicht funktionieren. Wenn die Daten ankommen, wird der an das Observable übergebene Callback aufgerufen. Code, der auf diese Daten zugreifen muss, muss sich im Callback befinden.

ngOnInit() {
    this.myHttp.getDataObservable(this.dataUrl).subscribe(
        data => {
          this.testResponse = data;
          console.log("I CANT SEE DATA HERE: ", this.testResponse);
        }
    );
}

Update

getDataObservable(url:string) {
    return this._http.get(url)
        .map(data => {
            data.json();
            // the console.log(...) line prevents your code from working 
            // either remove it or add the line below (return ...)
            console.log("I CAN SEE DATA HERE: ", data.json());
            return data.json();
    });
}
16

Weil der http-Anruf asynchron ist. Sie müssen in der Abonnementfunktion Zuweisungen vornehmen. Versuchen Sie es so:

this.myHttp.getDataObservable(this.dataUrl).subscribe(
            data => {
                      this.testResponse = data ;
                      console.log("I SEE DATA HERE: ", this.testResponse);
                     }
        );
5
Sefa

Hier ist ein einfach zu verwendendes Beispiel, mit dem Sie Versprechen verwenden können.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Config } from '../Config';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';

@Injectable()
export class Request {

    constructor(public http: Http)
    {

    }

    get(url): Promise<any>
    {
        return this.http.get(Config.baseUrl + url).map(response => {
            return response.json() || {success: false, message: "No response from server"};
        }).catch((error: Response | any) => {
            return Observable.throw(error.json());
        }).toPromise();
    }

    post(url, data): Promise<any>
    {
        return this.http.post(Config.baseUrl + url, data).map(response => {
            return response.json() || {success: false, message: "No response from server"};
        }).catch((error: Response | any) => {
            return Observable.throw(error.json());
        }).toPromise();
    }
}
1
Azarus