[Angular2] service with Http Error Catch 用法

當http 抓不到資料時拋出錯誤
github

1. import 
/* employee.service.ts */
------------------------------------

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http'; //import Http, Headers , Response
import {Observable} from 'rxjs/Observable';  //import Observable
import 'rxjs/add/operator/map'; //import rxjs map
import 'rxjs/add/operator/catch'; //import rxjs catch
import 'rxjs/add/Observable/throw';

@Injectable()
export class EmployeeService {

    private _url: string = "../apidata/employeeData.json";

    constructor(private _http: Http) {}

    getEmployees(){ 
        return this._http.get(this._url)
                .map(res => res.json())
                .catch(this._errorHandler);  // catch error handler
    } 

    _errorHandler(err: Response){
        console.error(err);
        return Observable.throw(err || "Server Error");
    }

}



2.
/* employee-list.component.ts */
-------------------------------------------------
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../employee.service';


@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
    employees = [];
    errorMsg: string;

    constructor(private _empService: EmployeeService) { }

    ngOnInit() {
        // this.employees = this._empService.getEmployees();
        this._empService.getEmployees()
            .subscribe(resEmpData => this.employees = resEmpData,
                       resEmpError => this.errorMsg = resEmpError);
    }


}


沒有留言:

張貼留言

蔡松霖
Related Posts with Thumbnails