Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Rxjs Going Reactive Slides

    Uploaded by

    king kane
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Rxjs Going Reactive Slides

    Uploaded by

    king kane
    2 views36 pages
    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.

    Original Description:

    Original Title

    rxjs-going-reactive-slides

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views36 pages

    Rxjs Going Reactive Slides

    Uploaded by

    king kane
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 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