Обработка ошибки в Angular2/7

101
03 августа 2019, 00:40

На input'e срабатывает метод и шлет запрос на товары. Получив массив объектов, сразу выводит его в шаблоне и в цикле шлется запрос за ценами на полученные id.

Проблема - при втором запросе на несуществующий code, сервер возвращает ошибку и некоторые товары в шаблоне выводятся без цен. Как правильно это обработать? В шаблоне, через *ngIf фильтровать reseivedServices по наличию ключа price нельзя.

Можно наверное фильтровать this.reseivedServices = this.reseivedServices.filter( i => i.price) но правильно, наверное через RxJs

onInputMethod(event) {
    this.httpService.getData(url, event)
        .subscribe(res => { 
            // получаем res = [{name: Apple, code: 1},{name: Pear, code: 2},{name: Plum, code: 3}] 
            // и в шаблоне показываем данные из reseivedServices
            this.reseivedServices = res; 
            // В цикле делаем запрос на цены
            for (const item of this.reseivedServices) {
       this.httpService.getOtherData(url, item.code) 
       // при несуществующем коде сервер возвращает ошибку и для некоторых позиций выводятся строки без цен
        .subscribe((res => {
            if (res.id === item.id) {
                    item.price = res.price; // добавляем цену
            }
     }      
}
Answer 1

Нужно получить receivedServices и замапить поток на from. from если аргументом получит массив - то будет идти по нему в цикле и генерировать событие для каждого элемента массива:

from([1, 2]).subscribe((number) => {
    console.log(`мое число = ${number}`);
});

Где 2 раза увидим в консоли:

мое число = 1
мое число = 2

Также используем оператор mergeMap, который будет параллельно обрабатывать все события, а не дожидаться выполнения одного после второго:

this.httpService.getData(url, event).pipe(
    // засеттили `receivedServices`
    tap((reseivedServices) => this.reseivedServices = receivedServices),
    // замапили поток
    switchMap(() => from(this.receivedServices)),
    // параллельно шлем запросы
    mergeMap((item) => this.httpService.getOtherData(url, item.code).pipe(
        // если сервер возвращает ошибку, то обарачиваем в `try-catch`, чтобы поток не завершился
        catchError((error) => of(error))
    )),
    // фильтруем ответ у которого нет `code`
    filter((res) => !!res.code)
).subscribe((res) => {
    this.receivedServices = this.receivedServices.map((item) => {
        if (res.id === item.id) {
            item.price = res.price;
        }
        return item;
    });
});
READ ALSO
Вопрос по коду таймера

Вопрос по коду таймера

Есть такой код, он работает так, что после окончания обратного отсчёта, он продолжает работать, но крутит уже в плюс, то есть, не останавливаетсяКак...

126
подскажите слушателя в JS

подскажите слушателя в JS

addEventListener('слушатеь',()=>{})

132