http服务命中在Angular中不起作用

Posted 2023-02-23

【中文标题】http服务命中在Angular中不起作用

【英文标题】：http service hit not working in Angular

【发布时间】：2018-10-21 16:13:20

【问题描述】：

我正在使用 JSONPlaceholder 获取服务中的数据，但我根本无法获取数据。请帮帮我。

user.component.html

<p (click)="getUsers()">Click Me!</p>
<ul *ngFor="let x of users">
  <li>x.name, x.age</li>
</ul>

user.component.ts

import  Component, OnInit  from '@angular/core';
import  Observable  from 'rxjs/Observable';
import  DataService  from '../../services/data.service';
import  Http  from '@angular/http';

@Component(
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
)
export class UserComponent implements OnInit 

  constructor(private http:Http)  

  ngOnInit() 
  

  getUsers()
    console.log(this.http.get("https://jsonplaceholder.typicode.com/posts"));
    

app.module.ts

//Basic File Inclusions
import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

//Additional files inclusion
import  AppComponent  from './app.component';
import  UserComponent  from './components/user/user.component';
import  DataService  from './services/data.service';
import  Http  from '@angular/http';

@NgModule(
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ Http ],
  bootstrap: [AppComponent]
)
export class AppModule  

请，有人可以帮助我通过 http 进行成功的服务调用并在控制台上获取数据。

【参考方案1】：

导入

import  HttpModule  from '@angular/http';

在 app.module.ts 中

imports: [HttpModule]

其余代码将与您发布的相同。

像调用http一样

this.http.get(`https://jsonplaceholder.typicode.com/posts`).subscribe(
    data => 
        console.log(data)
    );

【参考方案2】：

user.component.ts

import  Component, OnInit  from '@angular/core';
import  Observable  from 'rxjs/Observable';
import  DataService  from '../../services/data.service';
import  Http  from '@angular/http';
import  HttpClient  from '@angular/common/http';


@Component(
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
)
export class UserComponent implements OnInit 

  constructor(private http: HttpClient)  

  ngOnInit() 
  

  this.http.get(`https://jsonplaceholder.typicode.com/posts`).subscribe(
        data => 
            console.log(data)
        ); 

app.module.ts

//Basic File Inclusions
import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

//Additional files inclusion
import  AppComponent  from './app.component';
import  UserComponent  from './components/user/user.component';
import  DataService  from './services/data.service';
import  Http  from '@angular/http';
import  HttpModule  from "@angular/http";

@NgModule(
  declarations: [
    AppComponent,
    UserComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [ Http ],
  bootstrap: [AppComponent]
)
export class AppModule  

希望对你有所帮助..

【参考方案3】：

您只是调用http.get(url) 并期望得到一些回报，就像调用 ajax 方法而没有成功和错误回调方法。

请查看Http documentation and usage of get and post methods

错误/错误假设：

this.http.get(https://jsonplaceholder.typicode.com/posts) 不会返回预期的 http 响应

现实/正确方法：

您可以在返回类型为 Observable 的 http 的 get 方法上使用 pipe(can be used in the service) 或 subscribe(can be used in Component) 方法。

根据您的要求，您可以使用其中任何一个

http.get('https://jsonplaceholder.typicode.com/posts')
      // Call map on the response observable to get the parsed people object
      .pipe(map(res => res.json()))
      // Subscribe to the observable to get the parsed people object and attach it to the
      // component
      .subscribe(posts => this.posts = posts)

因此您的组件代码变为：

user.component.ts

import  Component, OnInit  from '@angular/core';
import  Observable  from 'rxjs/Observable';
import  DataService  from '../../services/data.service';
import  Http  from '@angular/http';

@Component(
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
)
export class UserComponent implements OnInit 

  constructor(private http:Http)  

  ngOnInit() 
  

  getUsers()
    this.http.get("https://jsonplaceholder.typicode.com/posts")
     .subscribe(posts=> console.log(posts))