HTTP 请求未触发

Question

我是 Angular 的新手，正在观看视频教程来发出 HTTP 请求并获取响应数据。出于某种原因，我使用的代码没有触发 http.get.

import { Component, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

@Injectable()
export class AppComponent {

  constructor( private http: Http ){
    console.log('Until here works');
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(data => {
      console.log('Finished');
      console.log( data );
    });
  }

}

Answer 1

这是来自文档：

The http.get does not send the request just yet. This Observable is cold, which means that the request won't go out until something subscribes to the Observable.

查看此 link 了解更多信息和详细示例：https://angular.io/docs/ts/latest/guide/server-communication.html

这里有一个具体的例子：

getProducts(): Observable<IProduct[]> {
    return this._http.get(this._productUrl)
        .map((response: Response) => <IProduct[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
}

然后这样订阅：

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

Answer 2

我们使用服务来最大限度地减少代码行数和开发时间。

使用 angular-cli 命令创建一个单独的服务 ng g s Get 这将为 you.but 创建一项新服务，您需要像这样将其添加为 app.module.ts 中的提供商。

或者，如果您没有使用 anular-cli，请创建一个文件 get.service.ts 文件并按照以下步骤操作

检查我制作的这个示例应用程序。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { GetService } from './get.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [GetService],
  bootstrap: [AppComponent]
})
export class AppModule { }

将这些代码添加到 get.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map';
@Injectable()
export class GetService {

  constructor(private http: Http) { }
  getData() {
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(m => m.json()
    ).subscribe(k => { console.log(k) }); // we have to subscribe for get data out
  }
}

app.component.ts应该是这样的

import { Component,Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { GetService } from './get.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
  constructor(private _service : GetService ){
    this._service.getData();
  }
}

阅读有关服务的更多信息here

Answer 3

您必须使用服务而不是直接在组件中使用它，因为服务可以使用 Angular 依赖注入来重用。如果您是新手，我建议您使用一次服务，因为这些是 angular 申请的组成部分。

我有一个处理一些基本问题的 Repo Angular 概念和服务就是其中之一12=]

https://github.com/rahulrsingh09/AngularConcepts

https://rahulrsingh09.github.io/AngularConcepts

HTTP 请求未触发

HTTP request doesn't fire off

angular4

angular