Question

angular2-jwt为本机Angular http类提供了一个AuthHttp包装器，它自动包含每个请求的http授权头。在我的服务中，我通常称这样的后端api

  getThings(): Observable<Thing[]> {
    return this.http.get(environment.apiEndpoint + '/things')
                    .map(res => res.json().data)
                    .catch(res => this.handleError(res));
  }

带有错误处理程序，如

private handleError(error: Response | any) {
  let errMsg: string;
  if (error instanceof Response) {
    const body = error.json() || '';
    const err = body.error || JSON.stringify(body);
    errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
  } else {
    errMsg = error.message ? error.message : error.toString();
  }
  // If JWT is expired open a new window to log in again
  if (errMsg.indexOf('No JWT present or has expired') !== -1) {
    window.open(environment.apiEndpoint + '/loginToApp?expired', '_blank', 'height=570,width=520');
  }
  console.error(error);
  return Observable.throw(errMsg);
}

我在所有服务中不断重复handleError方法，我想知道是否有办法让这个DRY。有没有办法为所有http请求定义通用错误处理程序？

如果可能的话，我想避免每次都拨打电话。有没有办法扩展http类以自动捕获每个请求的错误，然后在特殊情况下，我可以根据具体情况添加自定义捕获逻辑？

我可以从另一个文件导出该方法并将其导入我的每个服务中，但我认为必须有更好的方法。感谢您的任何建议。

更新：我最终从angular2-jwt扩展了AuthHttp类。

import { Http, RequestOptions, Response, Request, RequestOptionsArgs } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

import { AuthHttp, AuthConfig } from 'angular2-jwt';

export class ApiHttp extends AuthHttp { 

  public request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    return super.request(url, options).catch(res => this.handleError(res));
  }

  private handleError(error: Response | any) {
    // error handling then rethrow the error
    return Observable.throw(error);
  }
}

Answer 1

您可以像AuthHTTP Wrapper一样创建自定义服务CustomAuthHttp。就像包装器添加标头一样，在CustomAuthHttp中你可以捕获错误。然后在您的代码中注入CustomAuthHttp而不是AuthHTTP并使用。

@Injectable()
export class CustomAuthHttp {

  constructor(private http: AuthHttpWrapper) { }

  get(url: string) {
    return this.http.get(url)
      .catch(res => this.handleError(res));
  }

  private handleError(error: Response | any) {
    // your code
    return Observable.throw('');
  }
}

Angular中的通用http错误处理

1 个答案: