Исправляем ошибку в 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.
Полезные материалы
- RxJS Observables — Руководство по использованию
.map()
. - HttpClient в Angular — Документация по
HttpClient
в Angular. - Добавление заголовков в Angular — Руководство по управлению запросами в Angular.
- Работа с операторами в RxJS — Как работать с операторами в RxJS.
- Применение
map()
и.pipe()
в Angular — Практические примеры использования. - Типы данных в TypeScript — Основы типов данных в TypeScript.