Scribd
Upload
10 views36 pages

Rxjs Going Reactive Slides

The document describes how to handle errors when making HTTP requests to retrieve product data from a remote API. It shows different ways to catch errors using catchError and handle them by either returning an empty observable using EMPTY or rethrowing the error using throwError. The code sample subscribes to an Observable returned by a product service, which handles errors by setting an error message and returning EMPTY.

Uploaded by

king kane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views36 pages

Rxjs Going Reactive Slides

The document describes how to handle errors when making HTTP requests to retrieve product data from a remote API. It shows different ways to catch errors using catchError and handle them by either returning an empty observable using EMPTY or rethrowing the error using throwError. The code sample subscribes to an Observable returned by a product service, which handles errors by setting an error message and returning EMPTY.

Uploaded by

king kane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

catchError

EMPTY
throwError
"products$ | async"
products: Product[] = [];

constructor(private productService: ProductService) { }

ngOnInit() {
[Link]()
.subscribe(products => [Link] = products);
}

products$: Observable<Product[]>;

constructor(private productService: ProductService) { }

ngOnInit() {
[Link]$ = [Link]();
}
<div *ngIf="products">

<table>
<tr *ngFor="let product of products">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>

<div *ngIf="products$ | async as products">

<table>
<tr *ngFor="let product of products">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
catchError

catchError([Link])

-
-
return [Link]<Product[]>([Link])
.pipe(
catchError(err => {
[Link](err);
return of([{ id: 1, productName: 'cart'},
{ id: 2, productName: 'hammer'}]);
});

ngOnInit() {
[Link]()
.subscribe(
products => [Link] = products,
err => [Link] = err
);
}
catchError
return [Link]<Product[]>([Link])
.pipe(
catchError(err => {
[Link](err);
return of(
[{ id: 1, productName: 'cart'},
{ id: 2, productName: 'hammer'}
]);
catchError(err =>...)
})
);
catchError
catchError
-
-

-
-
-
-
return [Link]<Product[]>([Link])
.pipe(
catchError(err => {
[Link](err);
return throwError(err);
});
throwError

throwError(err)

-
throwError

-
private productsUrl = 'api/products';

getProducts(): Observable<Product[]> {
return [Link]<Product[]>([Link])
.pipe(
catchError([Link])
);
}
private handleError(err) {
// ...
return throwError(errorMessage);
}
[Link]()
.subscribe(
products => [Link] = products,
err => [Link] = err
);

[Link]$ = [Link]()
[Link]();
.pipe(
catchError(err => {
[Link] = err;
return ???;
})
);
EMPTY

return EMPTY;

-
[Link]$ = [Link]()
.pipe(
catchError(err => {
[Link] = err;
return EMPTY;
})
);
checkAlways

@Component({
templateUrl: './[Link]',
changeDetection: [Link]
})
private productsUrl = 'api/products';
getProducts(): Observable<Product[]> {
return [Link]<Product[]>([Link])
.pipe(
catchError([Link])
);
}

ngOnInit() {
[Link]$ = [Link]()
.pipe(
catchError(err => {
[Link] = err;
return EMPTY;
})
);
}
private productsUrl = 'api/products';

products$ = [Link]<Product[]>([Link]);

products$ = [Link]$;
private productsUrl = 'api/products';

products$ = [Link]<Product[]>([Link])
.pipe(
catchError([Link])
);

products$ = [Link]$
.pipe(
catchError(err => {
[Link] = err;
return EMPTY;
})
);
-

export interface Product {


id: number;
productName: string;
productCode: string;
categoryId: number;
description: string;
}
-

-
private productsUrl = 'api/products';

products$ = [Link]<Product[]>([Link])
.pipe(
catchError([Link])
);
products$ = [Link]$
.pipe(
catchError(err => {
[Link] = err;
return EMPTY;
})
);

@Component({
templateUrl: './[Link]',
changeDetection: [Link]
})
<div *ngIf="products$ | async as products">

<table>
<tr *ngFor="let product of products">
<td>{{ [Link] }}</td>
<td>{{ [Link] }}</td>
</tr>
</table>
-

-
-
catchError(err => {
[Link] = err;
return EMPTY;
})

catchError(err => {
[Link](err);
return throwError(err);
})
catchError

throwError

products$ = [Link]<Product[]>([Link])
.pipe(
catchError(err => {
[Link](err);
return throwError(err);
});

You might also like