Angularのhttp getからjsonデータを取得する正しい方法は何ですか。2。模擬エンドポイントを使用してローカルデータのテストに取り組んでいますが、http.get()
で結果を確認できますが、割り当てることができません。ローカルまたはタイミングの問題があります。これが私の簡単なサービスです。
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());
});
}
}
そして、ここに私がデータを割り当てようとしている方法があります:
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);
}
}
Get()呼び出しで必要なデータを見ることができますが、その呼び出しの後にアクセスできないようです...私が間違っていることを教えてください!
これはこのように機能するはずではありません。データが到着すると、observableに渡されたコールバックが呼び出されます。このデータにアクセスする必要があるコードは、コールバック内にある必要があります。
ngOnInit() {
this.myHttp.getDataObservable(this.dataUrl).subscribe(
data => {
this.testResponse = data;
console.log("I CANT SEE DATA HERE: ", this.testResponse);
}
);
}
更新
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();
});
}
HTTP呼び出しは非同期だからです。サブスクライブ機能で割り当てを行う必要があります。このようにしてみてください:
this.myHttp.getDataObservable(this.dataUrl).subscribe(
data => {
this.testResponse = data ;
console.log("I SEE DATA HERE: ", this.testResponse);
}
);
Promiseを使用できるようにする簡単なサンプルを次に示します。
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();
}
}