我刚接触Angular 2时仍在学习,我试图通过get调用来访问URL,但是即使在浏览器网络中,get似乎也没有通过,我找不到被调用的getURL。程序将在该方法控制台的上方和下方记录该get调用,但对于get调用什么都没有

我的服务方法

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");
}


导入的HttpModule在app.module.ts中

我的控制台屏幕截图



评论

我在调试时错过的重要事项:您应该订阅它才能使其正常工作。

#1 楼

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();


评论


谢谢,但是假设如果我们不在此处调用subscribe,而是调用方法调用subscribe的话,它为什么起作用

–user7161814
16-12-29在14:07

嵌套部分在控制台或其他任何地方都没有错误:)

–user7161814
16-12-29在14:10

谢谢花了将近3-4的时间才能使这个帖子最终发布,应该有一些错误可以帮助我:)

–user7161814
16-12-29在14:14

当我尝试解决此问题时,我得到的响应未定义和错误未定义。扔给我,直到找到答案。

– Peter Marshall
17年6月19日在9:25

@ user7161814,您要说的是:“我还没有订阅时事通讯,门口也没有杂志,但是在告诉我出问题的地方应该有错误:” :)

– Milad
17年7月4日在10:44

#2 楼

方法应使用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');
  }
}


选项和标头是可选的。 />

评论


没有订阅的情况下将不会进行呼叫,因此在此方法或调用方法中需要地图订阅之后

–user7161814
16 Dec 30'6:08

@INFOSYS是的,您是对的。我们将组件服务称为组件方法。

– Amol Bhor
16 Dec 30'在10:35

this._commonService.getPersonDetails(personId).subscribe(data => {//代码},error => {this.ajaxLoader.completeLoading();},()=> {this.ajaxLoader.completeLoading();});

– Amol Bhor
16 Dec 30'在10:38

#3 楼

正如Milad在回答中提到的那样,由于Http方法返回的Observable是冷/懒惰的,因此直到您对它们进行subscribe时才会触发。

但是,如果您不想.subscribe

如果您将Angular 6与Rxjs6一起使用并且不想使用Observable,则可以执行以下操作:

...
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();
}


这里有一个样本StackBlitz供您参考。

评论


我必须承认这是一个惊喜。感谢您展示!

– J E Carter II
19-09-26在13:14

#4 楼

注意:确保获得来自app.js或其他后端服务的响应,这些服务未托管在同一个角端口中,我们必须继续运行两个端口。因此最好使用两个终端,因为我使用VS代码终端来保持运行节点服务器(http:// localhost:3000 / api / get)并使用命令提示符来保持运行Angular服务器(http:// localhost:4200)