Угловой сервис не работает с http.get наблюдаемым - PullRequest
0 голосов
/ 02 сентября 2018

Я пытаюсь получить файл json с сервера с помощью http.get и подписаться на наблюдаемый компонент. Однако возвращается ошибка, а не данные.

Подскажите, пожалуйста, где я ошибаюсь:

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.

Пожалуйста, помогите.

1 Ответ

0 голосов
/ 02 сентября 2018

Используйте HttpClient вместо Http. Http возвращает объект типа Response. Вам нужно вызвать метод json(), чтобы получить данные, которые вы ищете.

Чтобы избежать этого, используйте HttpClient. И чтобы использовать HttpClient, вам нужно сначала добавить HttpClientModule в массив imports вашего модуля.

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.

Вам следует рассмотреть возможность использования безопасного API для фильмов.

Вы можете использовать OMDb API . Это безопасный и бесплатный API для получения подробной информации о фильме. Сначала вам нужно будет создать ключ API. Вы можете сделать это здесь .

...