角服务不工作与http.get观察

Question

我正在尝试使用http.get从服务器检索json文件，并从组件订阅可观察的内容。但是，它返回的是一个错误，而不是数据。

你能告诉我哪里出了问题吗：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';

@Injectable()
export class MoviesService {

  constructor(private http: Http) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

下面是组件：

import { Component } from '@angular/core';
import { MoviesService } from './movies.service';

@Component({
  selector: 'movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.css'],
  providers: [
    MoviesService
  ]
})

export class MoviesComponent {

  constructor(private moviesService: MoviesService) {};

  ngOnInit() {
    this.moviesService.getMovies().subscribe(
      (data: any) => {
        console.log("Success " + data);
      },
      (err) => {
        console.log("Error: " + JSON.stringify(err));
      }
    );
  }
}

我正在使用Angular和rxjs库的最新版本。

请帮忙。

Answer 1

在我的例子中，我的app.module.ts文件的imports部分既有HttpClientTestingModule，也有HttpClientModule。

从app.module.ts中删除HttpClientTestingModule修复了我的问题。

角度： 11.0.9

Answer 2

使用HttpClient而不是HttpHttp返回类型为Response的对象。您必须对其调用json（）方法，该方法将为您提供所需的数据。

要避免这样做，请使用HttpClient。要使用HttpClient，您必须首先将HttpClientMoules添加到模块的导入数组中。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class MoviesService {

  constructor(private http: HttpClient) {
  }

  getMovies() : Observable<any> {
    let url = API_URL;
    return this.http.get(url);
  }
}

您的API不安全。这就是客户端阻止它并给出混合内容错误的原因。当一些内容通过HTTPS提供，而一些内容通过HTTP提供时，通常会发生这种情况。我真的不认为有办法在不改变应用编程接口的情况下解决这个问题。

你应该考虑使用一个安全的API来制作电影。

可以使用OMDb API。这是一个安全和免费的API来获取电影细节。您必须先创建一个API Key。你可以在这里做。