Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2018, 18:39
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

Подчитывание данных в компонент по HTTP
В компонент подгружаются данные. Поскольку данных много, читаем их по частям. К компоненту подключен сервис, который читает данные. Если читать одним куском -- нет вопросов. А вот как быть с чтением кусками?
// массив данных
public userReqList: AssessRequest[];

// сервис работы с данными
constructor(
	private reqListService: RequestListService,
) {}

// во время инициализации читаем стартовую порцию данных
ngOnInit() {
	const url = `${this.apiRoute}`;
	this.listSubscr$ = this.reqListService
		.getUserReqList(url)
		.subscribe((data: AssessRequest[]) => {
			this.userReqList = data;
		});
}

// закрываем подписку на поток данных
ngOnDestroy(){
	this.listSubscr$.unsubscribe();
}

// Событие скролла, которое инициируем подчитывание данных
onScrollDown(): void {
	this.readItems(this.userReqList.length, this.limit, this.filter);
}

// Подчитываем данные по кусочку, указывая считываемый фрагмент
readItems(from: number, limit: number): void {
	const url = `${this.apiRoute}?start=${from}&limit=${limit}`;
	
	this.reqListService
		.getUserReqList(url)
		.subscribe((data) => {
			this.userReqList.push(...data);
		})
}


По идее каждый вызов readItems будет генерировать подписку на поток, которая после прочтения потока как бы зависает в воздухе и формирует куче слушателей.

Как обойти такое? Можно конечно сразу-же по завершению потока отписываться от него, но это, по моему, как-то ненормально.

readItems(from: number, limit: number, filter: string): void {
	const url = `${this.apiRoute}?start=${from}&limit=${limit}`;
	const subscr$ = this.reqListService
		.getUserReqList(url)
		.subscribe((data) => {
			this.userReqList.push(...data);
			subscr$.unsubscribe();
		})
}


Есть же наверное стандартный подход для такой ситуации?
Я искал решения, но подходящего не нашел.
Буду благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2018, 08:25
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

sniffysko,
Используй take(1), который автоматически выполнит отписку после получения данных https://www.learnrxjs.io/operators/filtering/take.html
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2018, 14:16
Аспирант
Отправить личное сообщение для sniffysko Посмотреть профиль Найти все сообщения от sniffysko
 
Регистрация: 20.10.2009
Сообщений: 79

take(1) предполагает чтение 1 записи из потока. Я не знаю изначально сколько данных придет.
А вот здесь: Отписываться или не отписываться пишут, что описку от потоков http производить не надо. Может я неправильно понял?
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2018, 16:10
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

sniffysko,
Так у вас при скролле вызывается метод readItems, в котором и происходит подписка. Если вы в этот метод добавите take(1), то при получении данных будет сразу и отписка. При следующем скролле - новая подписка => получение данных => отписка и т.д.
Цитата:
А вот здесь: Отписываться или не отписываться пишут, что описку от потоков http производить не надо
Да https://github.com/angular/angular/b...rc/xhr.ts#L217

Последний раз редактировалось destus, 06.07.2018 в 16:14.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Компонент иерархической фильтрации данных yriiarutiunian Ваши сайты и скрипты 0 08.11.2014 15:20
Иерархический компонент фильтрации данных yriiarutiunian Библиотеки/Тулкиты/Фреймворки 0 23.07.2014 14:21
Разметка для Google closure compiler monolithed Оффтопик 11 04.09.2013 00:50
почему селект вдруг перестал работать в эксплорере и гуглхроме? Краса (X)HTML/CSS 44 04.05.2013 19:18
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 12:00