Scribd
Upload
4 views

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
4 views

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
You are on page 1/ 36

catchError

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

constructor(private productService: ProductService) { }

ngOnInit() {
this.productService.getProducts()
.subscribe(products => this.products = products);
}

products$: Observable<Product[]>;

constructor(private productService: ProductService) { }

ngOnInit() {
this.products$ = this.productService.getProducts();
}
<div *ngIf="products">

<table>
<tr *ngFor="let product of products">
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
</tr>
</table>

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

<table>
<tr *ngFor="let product of products">
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
</tr>
</table>
catchError

catchError(this.handleError)

-
-
return this.http.get<Product[]>(this.productsUrl)
.pipe(
catchError(err => {
console.error(err);
return of([{ id: 1, productName: 'cart'},
{ id: 2, productName: 'hammer'}]);
});

ngOnInit() {
this.productService.getProducts()
.subscribe(
products => this.products = products,
err => this.errorMessage = err
);
}
catchError
return this.http.get<Product[]>(this.url)
.pipe(
catchError(err => {
console.error(err);
return of(
[{ id: 1, productName: 'cart'},
{ id: 2, productName: 'hammer'}
]);
catchError(err =>...)
})
);
catchError
catchError
-
-

-
-
-
-
return this.http.get<Product[]>(this.productsUrl)
.pipe(
catchError(err => {
console.error(err);
return throwError(err);
});
throwError

throwError(err)

-
throwError

-
private productsUrl = 'api/products';

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

this.products$ = this.productService.getProducts()
this.productService.getProducts();
.pipe(
catchError(err => {
this.errorMessage = err;
return ???;
})
);
EMPTY

return EMPTY;

-
this.products$ = this.productService.getProducts()
.pipe(
catchError(err => {
this.errorMessage = err;
return EMPTY;
})
);
checkAlways

@Component({
templateUrl: './product-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
private productsUrl = 'api/products';
getProducts(): Observable<Product[]> {
return this.http.get<Product[]>(this.productsUrl)
.pipe(
catchError(this.handleError)
);
}

ngOnInit() {
this.products$ = this.productService.getProducts()
.pipe(
catchError(err => {
this.errorMessage = err;
return EMPTY;
})
);
}
private productsUrl = 'api/products';

products$ = this.http.get<Product[]>(this.productsUrl);

products$ = this.productService.products$;
private productsUrl = 'api/products';

products$ = this.http.get<Product[]>(this.productsUrl)
.pipe(
catchError(this.handleError)
);

products$ = this.productService.products$
.pipe(
catchError(err => {
this.errorMessage = err;
return EMPTY;
})
);
-

export interface Product {


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

-
private productsUrl = 'api/products';

products$ = this.http.get<Product[]>(this.productsUrl)
.pipe(
catchError(this.handleError)
);
products$ = this.productService.products$
.pipe(
catchError(err => {
this.errorMessage = err;
return EMPTY;
})
);

@Component({
templateUrl: './product-list.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
<div *ngIf="products$ | async as products">

<table>
<tr *ngFor="let product of products">
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
</tr>
</table>
-

-
-
catchError(err => {
this.errorMessage = err;
return EMPTY;
})

catchError(err => {
console.error(err);
return throwError(err);
})
catchError

throwError

products$ = this.http.get<Product[]>(this.productsUrl)
.pipe(
catchError(err => {
console.error(err);
return throwError(err);
});

You might also like