我刚开始学习Angular 2我正在尝试使用get调用来访问一个URL,但即使在浏览器的网络中,get似乎也没有通过我无法找到获取URL的内容。
该程序将进入上面和下面的方法控制台记录,但是获取调用没有任何内容
我的服务方法
import { Headers, Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Persons } from './mock-people';
import { Person } from './person';
import {Observable} from 'rxjs/Rx';
getAllPersons(): void {
console.log("Here");
this.http.get(`http://swapi.co/api/people/1`)
.map((response: Response) => {
console.log(response.json());
response.json();
});
console.log("Comes here 2");
}
在app.module.ts中导入HttpModule
我的控制台屏幕截图
答案 0 :(得分:86)
Http使用rxjs并且是一个冷/懒惰的可观察对象,这意味着你应该订阅它以使其工作。
this.http.get(`http://swapi.co/api/people/1`)
.map((response: Response) => {
console.log(response.json());
response.json();
})
.subscribe();
或者,如果您想从其他地方订阅,则应该返回http.get
方法,如下所示:
getAllPersons(): Observable <any> {
console.log("Here");
return this.http.get(`http://swapi.co/api/people/1`)
.map((response: Response) => {
console.log(response.json());
return response.json();
});
}
然后:
getAllPersons().subscribe();
答案 1 :(得分:1)
方法应该使用Observable返回api调用的响应。
<强> service.cs 强>
import { Http, Jsonp, Response, Headers, RequestOptions } from '@angular/http';
import { Injectable } from '@angular/core';
import { Persons } from './mock-people';
import { Person } from './person';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
@Injectable()
export class Service {
constructor(private jsonp: Jsonp, private _http: Http) { }
getAllPersons():Observable<any>{
console.log("Here");
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers, method: 'get' });
return this._http.get('http://swapi.co/api/people/' + personId)
.map((res:Response) => {
return <any>res.json();
})
.catch(this.handleError);
console.log("Comes here 2");
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || ' error');
}
}
选项&amp;标题是可选的。
注意:您可以定义数据类型或在响应中获取数据的任何其他已定义类型,而不是(<any>
)。
谢谢。
答案 2 :(得分:0)
正如Milad在他的tutorial中所提到的那样,由于Http方法返回的Observable
是冷/懒惰的,只有在您subscribe
对其使用之后才会触发。
但是,如果您不想.subscribe
到Observable
,但仍然希望触发HTTP请求怎么办?
如果您将Angular 6与Rxjs6一起使用并且不想subscribe
,则可以执行以下操作:
...
import { publish } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
getAllPersons() {
const getAllPersons$ = this.http.get(`https://swapi.co/api/people/1`)
.pipe(
publish()
);
getAllPersons$.connect();
}
这是您推荐的answer。
答案 3 :(得分:0)
注意:确保从app.js或一些其他后端服务获得响应,这些服务不在同一角度端口中托管,我们必须继续运行这两个端口。所以最好使用两个终端,因为我使用VS代码终端来保持运行节点服务器(http:// localhost:3000 / api / get)并使用命令提示符来保持运行Angular服务器(http:// localhost:4200)< / p>