Angular 2：http.get中Observable無法處理錯誤

Question

我使用observables進行Http調用，它一直工作正常，但後來我改變了我的控制器，並注意到我的代碼顯然沒有處理錯誤。

這裏看看代碼從我的服務（SellingMenuService）：

public getVarieties(): Observable<any> { 
    return this.http.get(this.varietyListUrl).map(response => { 
     return response.json(); 
    }, (error: any) => { 
     console.log(error); 
     console.log('error finding variety list'); 
     // TODO: implement error handling here. 
    }); 
} 

這裏是我的組件的相關代碼：

constructor(public sellingMenuService: SellingMenuService) { } 

getVarietyList(): void {   
    this.sellingMenuService.getVarieties().subscribe(res => {    
     console.log(res); 
     this.varieties = res; 
    });   
} 

這裏是我的控制檯一些錯誤：

如果我得到一個500錯誤，不應該從我的服務上面的控制檯日誌被擊中？他們爲什麼不呢？

Answer 1

您似乎在map()中有您的錯誤處理邏輯。

import 'rxjs/add/operator/catch'; 

return this.http.request(request) 
    .map(res => res.json()) 
    .subscribe(
    data => console.log(data), 
    err => console.log(err), 
    () => console.log('yay') 
); 

參見：How to catch exception correctly from http.request()?

Answer 2

您正在試圖抓住錯誤的map方法，而你應該做這裏面subscribe。

public getVarieties(): Observable<any> { 
    return this.http.get(this.varietyListUrl).map(response => { 
     return response.json(); 
    }).subscribe((res: any) => { 
     console.log(res); 
    }, (error: any) => { 
     console.log(error); 
     console.log('error finding variety list'); 
     // TODO: implement error handling here. 
    }); 
} 

您還可以將第三個參數添加到observable。它會得到解決時，可觀察到的是finalized：

public getVarieties(): Observable<any> { 
    return this.http.get(this.varietyListUrl).map(response => { 
     return response.json(); 
    }).subscribe((res: any) => { 
     console.log(res); 
    }, (error: any) => { 
     console.log(error); 
     console.log('error finding variety list'); 
     // TODO: implement error handling here. 
    },() => { 
     console.log("finalized") 
    }); 
} 

你可以在這裏閱讀更多： http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html