在 GET http 请求中注册错误函数

Question

我不知道如何处理GETAPI调用的错误情况。请更新我的代码段以处理 API 调用失败的情况。

代码片段

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
@Injectable()
export class PostsService {
constructor(private http:Http) { 
}
getPostData(){
return this.http.get("https://jsonplaceholder.typicode.com/posts").map((res:Response) => res.json());   
}
}

Answer 1

this.PostsService.getPostData(params).subscribe(
data =>
{
//data that has come back from the api
},
err =>
{
// err will be any errors responces from the API 
}
);

然后，您可以随心所欲地处理错误。

Answer 2

步骤 1 ：import 'rxjs/add/operator/catch';

第 2 步：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
@Injectable()
export class PostsService {
constructor(private http:Http) { 
}
getPostData(){
return this.http.get("https://jsonplaceholder.typicode.com/posts").map((res:Response) => res.json()).catch(this.handleError);   
}
handleError(err){
//Observable.throw(err);
}

}

然后当你订阅时：

this._yourService.getPostData().subscribe(res=>{
console.log(res);
},err=>{
console.log(err);
});

Answer 3

1 ) Make a different Service file where you can call rest APIs.
2) And make a call from your component by injection the services.

**For Example, Assume  this is Service file assume ->**
getEvents(response) {
let accesstoken = localStorage.getItem('access_token');
let headers = new HttpHeaders();
headers = headers.append('Authorization', 'Bearer ' + accesstoken);
let url = this.baseUrl + 'getEventListingToAdmin?page=' + response.page + '&perPage=10';
var data = this.http.get(url, {headers: headers});
return data;
}

**And This is a Component Part -->**
first import the service file in component 
import { AdminService }      from  '../../admin.service';
**Then Inject it in constructor**
constructor(private admin: AdminService) { }
ngOnInit  () {
this.admin.getEvents(response)
.subscribe(
(data:any) => {
//USE CAN USE HERE LOADS
this.loading = false;
// CAN CHECK THE RESPONSE STATUS
if(data.statusCode==200){
this.managersData = data.data.EventData;
this.allItems     = data.data.EventCount;
}
},
error => {
//USE CAN USE HERE LOADS
this.loading = false;
// CAN CHECK THE RESPONSE STATUS
if(error.error.statusCode===401)
{
// CAN ADD SWEET ALERT
Swal(
error.error.msg,
'error'
)
}

});
}

Answer 4

为此使用err callback。

conponent.ts

constructor(private postsService:PostsService){}
ngOnInit(){
this.postsService.getPostData().subscribe(res =>{
console.log(res)
},err =>{
console.log(err)
});
}