Исправляем ошибку в Angular: http.get(...).map is not a function

Быстрый ответ

Метод .map() должен использоваться внутри конструкции .pipe():

import { map } from 'rxjs/operators';

this.http.get('/api/data').pipe(
  map(res => res)
);

С версии RxJS 5.5, оператор map требуется применять внутри метода pipe().

Осознанное подключение операторов

Выберите из пакета RxJS только необходимые операторы, вместо полного подключения через import 'rxjs/Rx'. Это уменьшит размер вашего бандла, увеличит скорость загрузки и будет поддерживать tree shaking:

import { map } from 'rxjs/operators';

Размещение HTTP-запросов

Ресурсы HTTP GET лучше размещать в сервисе:

import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) {}

  fetchData() {
    return this.http.get('/api/data').pipe(
      map(data => data)
    );
  }
}

Также подписку на observable рекомендуется производить прямо в компоненте, желательно в хуке жизненного цикла ngOnInit:

ngOnInit() {
  this.dataService.fetchData().subscribe(data => {
    this.data = data;
  });
}

Не забывайте процедуру отписки от Observable, чтобы предотвратить утечки памяти.

Усиление безопасности типов

При работе с TypeScript, приоритетом является явное указание типов данных. Усовершенствуйте проверку типов, определив интерфейс для ожидаемых данных:

interface DataModel {
  /*... структура данных ...*/
}

this.http.get<DataModel>('/api/data').pipe(
  map(data => data)
);

Cиклы жизни и внедрение зависимостей

Хук ngOnInit можно использовать для инициализации получения данных, а для работы с сервисами удобно применять внедрение зависимостей (DI):

constructor(private dataService: DataService) {}

Обработка ответов и настройка tsconfig

Если у вас есть проблемы с обработкой ответов, проверьте ваш сервисный класс и файл tsconfig.json. Вероятно, настройки этого файла играют ключевую роль в корректной обработке HTTP-запросов.

Опциональность оператора .map

Если трансформация данных не требуется, оператор map можно пропустить и обработать данные непосредственно при вызове subscribe:

this.dataService.fetchData().subscribe(
  data => this.processData(data),
  error => this.handleError(error)
);

Визуализация

HTTP GET запрос можно представить как поток данных, проходящий через трубопровод:

[Старт HTTP GET] ---> [Трубопровод: .map (Трансформация)] ---> [Компонент: Успешное получение данных]

Если отсутствует .map, поток прерывается:

[Старт HTTP GET] --X-- [Проблема с .map] ---> [💧] ==> 🚱 Компоненту не достаются данные!

Замена функции .map на map() внутри pipe() решит проблему:

import { map } from 'rxjs/operators';

http.get(...).pipe(map(data => /* "map, я твой отец!" */ transformData(data)));

Таким образом, исправленный поток будет обеспечивать естественное поступление данных к компоненту:

[Старт HTTP GET] ---> [💧🔧 Функциональный трубопровод: .pipe(map())] ---> [Компонент: Данные получены 🌊]

Избежание типичных ошибок

Нежелательно полное подключение RxJS

Нежелательно подключать весь RxJS командой import 'rxjs/Rx', так он будет замедлять работу приложения.

Подробнее об этом расскажет наш спикер на видео

Необходимость процедуры отписки

Если не произвести отписку от observable, можно вызвать утечку памяти. Запомните использовать 'ngOnDestroy': 'мы уже приехали?'

Правила использования http.get

http.get(...) возвращает observable. Подпишитесь на него или преобразуйте в promise.

Определение типов данных

Без указания типа TypeScript не может корректно контролировать проверку типов. Обязательно определите интерфейс для ваших данных.

Развитие навыков

Для работы с HTTP GET в Angular изучите основы Angular HttpClient и TypeScript. В комбинации с внедрением зависимостей в Angular это поможет применять лучшие практики и писать чистый, ясный код на современном синтаксисе ES6.

Полезные материалы

1. RxJS Observables — Руководство по использованию .map().
2. HttpClient в Angular — Документация по HttpClient в Angular.
3. Добавление заголовков в Angular — Руководство по управлению запросами в Angular.
4. Работа с операторами в RxJS — Как работать с операторами в RxJS.
5. Применение map() и .pipe() в Angular — Практические примеры использования.
6. Типы данных в TypeScript — Основы типов данных в TypeScript.