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()কোনও ত্রুটি উত্থাপন করে কারণ এটি জেএসওএন ডেটা পার্স করতে পারে নি, _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';পরিবর্তে আমি এই লাইনটি যুক্ত করেছি । এখন সমস্ত অপারেটর সঠিকভাবে কাজ করে।