บริการใหม่ที่อัปเดตเพื่อใช้ HttpClientModule และRxJS v5.5.x :
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { catchError, tap } from 'rxjs/operators';
import { SomeClassOrInterface} from './interfaces';
import 'rxjs/add/observable/throw';
@Injectable()
export class MyService {
url = 'http://my_url';
constructor(private _http:HttpClient) {}
private handleError(operation: String) {
return (err: any) => {
let errMsg = `error in ${operation}() retrieving ${this.url}`;
console.log(`${errMsg}:`, err)
if(err instanceof HttpErrorResponse) {
// you could extract more info about the error if you want, e.g.:
console.log(`status: ${err.status}, ${err.statusText}`);
// errMsg = ...
}
return Observable.throw(errMsg);
}
}
// public API
public getData() : Observable<SomeClassOrInterface> {
// HttpClient.get() returns the body of the response as an untyped JSON object.
// We specify the type as SomeClassOrInterfaceto get a typed result.
return this._http.get<SomeClassOrInterface>(this.url)
.pipe(
tap(data => console.log('server data:', data)),
catchError(this.handleError('getData'))
);
}
บริการเก่าซึ่งใช้ HttpModule ที่เลิกใช้แล้ว:
import {Injectable} from 'angular2/core';
import {Http, Response, Request} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
//import 'rxjs/Rx'; // use this line if you want to be lazy, otherwise:
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do'; // debug
import 'rxjs/add/operator/catch';
@Injectable()
export class MyService {
constructor(private _http:Http) {}
private _serverError(err: any) {
console.log('sever error:', err); // debug
if(err instanceof Response) {
return Observable.throw(err.json().error || 'backend server error');
// if you're using lite-server, use the following line
// instead of the line above:
//return Observable.throw(err.text() || 'backend server error');
}
return Observable.throw(err || 'backend server error');
}
private _request = new Request({
method: "GET",
// change url to "./data/data.junk" to generate an error
url: "./data/data.json"
});
// public API
public getData() {
return this._http.request(this._request)
// modify file data.json to contain invalid JSON to have .json() raise an error
.map(res => res.json()) // could raise an error if invalid JSON
.do(data => console.log('server data:', data)) // debug
.catch(this._serverError);
}
}
ฉันใช้.do()
( ตอนนี้.tap()
) สำหรับการดีบัก
เมื่อมีข้อผิดพลาดเซิร์ฟเวอร์ที่body
ของResponse
วัตถุที่ฉันได้รับจากเซิร์ฟเวอร์ฉันใช้ (Lite เซิร์ฟเวอร์) มีข้อความเพียงเพราะฉะนั้นเหตุผลที่ผมใช้ข้างต้นมากกว่าerr.text()
err.json().error
คุณอาจต้องปรับบรรทัดนั้นสำหรับเซิร์ฟเวอร์ของคุณ
หากres.json()
เกิดข้อผิดพลาดเนื่องจากไม่สามารถแยกวิเคราะห์ข้อมูล JSON _serverError
ได้จะไม่ได้รับResponse
วัตถุดังนั้นเหตุผลในการinstanceof
ตรวจสอบ
ในสิ่งนี้plunkerเปลี่ยนurl
เป็น./data/data.junk
เพื่อสร้างข้อผิดพลาด
ผู้ใช้บริการควรมีรหัสที่สามารถจัดการกับข้อผิดพลาด:
@Component({
selector: 'my-app',
template: '<div>{{data}}</div>
<div>{{errorMsg}}</div>`
})
export class AppComponent {
errorMsg: string;
constructor(private _myService: MyService ) {}
ngOnInit() {
this._myService.getData()
.subscribe(
data => this.data = data,
err => this.errorMsg = <any>err
);
}
}
throw()
ฟังก์ชัน ฉันเพิ่มบรรทัดนี้import 'rxjs/Rx';
แทน ขณะนี้ตัวดำเนินการทั้งหมดทำงานได้อย่างถูกต้อง