Angular 2 http 没有得到

Posted 2023-02-19

【中文标题】Angular 2 http 没有得到

【英文标题】：Angular 2 http get not getting

【发布时间】：2017-05-13 20:48:48

【问题描述】：

我是 Angular 2 的新手，仍在学习我正在尝试使用 get 调用来访问 URL，但即使在浏览器的网络中，get 似乎也没有通过，我找不到调用的 get URL。

程序将转到该方法控制台记录该 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");

在 app.module.ts 中导入 HttpModule

我的控制台屏幕截图

【问题讨论】：

我在调试时错过的重要事情：you should subscribe to it to make it work.

【参考方案1】：

Http 使用 rxjs 并且是一个冷/惰性的 observable，这意味着您应该订阅它以使其工作。

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

【讨论】：

谢谢，但是假设如果我们在这里不调用订阅但是调用方法调用订阅为什么它会起作用

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

谢谢它花了将近 3-4 才得到这个最后不得不发布，应该有一些错误来帮助我:)

当我试图解决这个问题时，我得到了未定义的响应和未定义的错误。扔给我，直到我找到这个答案。

@user7161814 ，您的要求与说：“我还没有订阅时事通讯，而且我家门口没有任何杂志，但应该有错误某处告诉我出了点问题:":)

【参考方案2】：

正如 Milad 在他的 answer 中提到的，由于 Http 的方法返回的 Observables 是冷/懒惰的，并且在您向他们 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();

这里有一个Sample StackBlitz 供您参考。

【讨论】：

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

【参考方案3】：

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

选项和标题是可选的。

注意：除了 (<any>)，您可以定义您的数据类型或您在响应中获取数据的任何其他已定义类型。

谢谢。

【讨论】：

如果没有订阅，则不会进行调用，因此在此方法或调用方法中需要地图订阅后

@INFOSYS 是的，你是对的。如果我们调用我们的服务，我们可以在组件方法中做到这一点。

this._commonService.getPersonDetails(personId) .subscribe( data => //code , error => this.ajaxLoader.completeLoading(); , () => this.ajaxLoader .completeLoading(); );

【参考方案4】：

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