Angular 2 http Service Обработка ошибок - PullRequest
Новая
       7

Angular 2 http Service Обработка ошибок

0 голосов
/ 19 мая 2018

Я новичок в Angular 2, и я работаю с внешней системой для вызовов HTTP API.Я хочу показать пользователю ошибки API в виде уведомления о тостере.Но я не смог использовать тостер-сервер в своем методе обработки ошибок .. 

import { BadInput } from './../common/bad-input';
import { NotFoundError } from './../common/not-found-error';
import { AppError } from './../common/app-error';
import { Http, RequestOptions , Headers } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';
import { environment } from '../../environments/environment';
import { ToastrService } from 'ngx-toastr';

@Injectable()
export class DataService {

options: object;

constructor( private http: Http , private toastr: ToastrService ) { 
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Authorization', 'Bearer '+localStorage.getItem('token'));
  this.options = new RequestOptions({ headers: headers });

}

getAll(url: string) {
  return this.http.get(environment.apiEndPoint+url,this.options)
    .map(response => response.json())
    .catch(this.handleError);
}
create(url: string,resource) {
  return this.http.post(environment.apiEndPoint+url, JSON.stringify(resource),this.options)
    .map(response => {
       this.toastr.success( 'Data Saved Successfully');
       return response.json(); 
     })
    .catch(this.handleError);
}

private handleError(error: Response) {
  if (error.status === 403){
    this.toastr.error( 'User Login Failed');
    return Observable.throw(new BadInput(error.json()));
  }
  if (error.status === 500){
    this.toastr.error( 'Internal Server Error');
    return Observable.throw(new BadInput(error.json()));
  }
  if (error.status === 422){
    this.toastr.error( 'Validation Failed');
    return Observable.throw(new BadInput(error.json()));
  }

  if (error.status === 404){
    this.toastr.error( 'Not found');
    return Observable.throw(new NotFoundError(error.json()));
  }

  this.toastr.error( 'Something went wrong. Please contact Administrator!');
  return Observable.throw(new AppError(error.json()));
}

}

Тостер работает нормально с положительным ответом (200).Если http выдает какую-либо ошибку, я не могу обработать ее в пользовательском интерфейсе.

1 Ответ

0 голосов
/ 19 мая 2018

То же, что и функция карты, функция ошибки ожидает чего-то от сервера!Карта ожидает результат запроса, .error () ожидает объект ошибки!Так что вы можете сделать что-то вроде этого: 

getAll(url: string) {
  return this.http.get(environment.apiEndPoint+url,this.options)
    .map(response => response.json())
    .catch(error => this.handleError(error));
}

Надеюсь, это поможет !!!

...