主页 / 问题 / 930707
Accepted
Lex
Asked:2020-01-11 04:32:59 +0000 UTC2020-01-11 04:32:59 +0000 UTC

Angular2/7 中的错误处理

  • 772

该input方法在 'e 上触发并发送商品请求。收到一组对象后，它会立即将其显示在模板中，并为收到的对象发送价格请求id。

问题是在第二次请求不存在的代码时，服务器返回错误，并且模板中的某些产品显示没有价格。如何正确处理？在模板中，您不能通过 *ngIfreseivedServices按是否存在键进行过滤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; // добавляем цену
            }
     }      
}
javascript

1 个回答

  1. Best Answer

    您需要获取receivedServices流并将其映射到from. from如果它接收一个数组作为参数，它将循环遍历它并为数组的每个元素生成一个事件：

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

    我们将在控制台中看到 2 次：

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

    我们还使用 operator 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;
    });
});
    • 3

相关问题