angular2에서 httpinterceptor에 해당하는 것은 무엇입니까?
angularjs에는 http 인터셉터가 있습니다.
$httpProvider.interceptors.push('myHttpInterceptor');
이를 통해 모든 http 호출에 연결하고 로딩 바를 표시하거나 숨기고, 로깅을 수행 할 수 있습니다.
angular2에서 동등한 것은 무엇입니까?
@ Günter가 지적했듯이 인터셉터를 등록 할 방법이 없습니다. Http클래스 를 확장하고 HTTP 호출에 대한 인터 셉션 처리를해야합니다.
먼저 다음을 확장하는 클래스를 만들 수 있습니다 Http.
@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
console.log('request...');
return super.request(url, options).catch(res => {
// do something
});
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
console.log('get...');
return super.get(url, options).catch(res => {
// do something
});
}
}
아래 설명 된대로 등록하십시오.
bootstrap(AppComponent, [HTTP_PROVIDERS,
new Provider(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
deps: [XHRBackend, RequestOptions]
})
]);
request와 requestError종류는 대상 메소드를 호출하기 전에 추가 할 수 있습니다.
를 들어 response하나, 기존 프로세싱 체인에 약간의 비동기 처리를 연결해야합니다. 이것은 필요에 따라 다르지만 flatMapObservable 과 같은 연산자를 사용할 수 있습니다 .
마지막으로 대상 호출 responseError에서 catch교환 원 을 호출해야합니다 . 이렇게하면 응답에서 오류가 발생할 때 알림을 받게됩니다.
이 링크가 도움이 될 수 있습니다.
최신 정보
HttpClientAngular 4.3.0에 도입 된 새로운 모듈은 https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0 인터셉터를 지원합니다.
feat (common) : 새로운 HttpClient API HttpClient는 별도의 패키지 @ angular / common / http에 함께 존재하는 기존 Angular HTTP API의 진화입니다. 이 구조는 기존 코드베이스가 새 API로 천천히 마이그레이션 될 수 있도록합니다.
새로운 API는 레거시 API의 인체 공학 및 기능을 크게 향상시킵니다. 새로운 기능의 일부 목록은 다음과 같습니다.
- JSON 본문 유형에 대한 지원을 포함하여 형식화 된 동기식 응답 본문 액세스
- JSON은 가정 된 기본값이며 더 이상 명시 적으로 구문 분석 할 필요가 없습니다.
- 인터셉터를 통해 미들웨어 로직을 파이프 라인에 삽입 할 수 있습니다.
- 변경 불가능한 요청 / 응답 객체
- 요청 업로드 및 응답 다운로드 모두에 대한 진행 이벤트
- 요청 후 검증 및 플러시 기반 테스트 프레임 워크
실물
Angular2에는 (아직) 인터셉터가 없습니다. 대신 확장 할 수 있습니다 Http, XHRBackend, BaseRequestOptions또는 다른 관련 클래스 (타이프 라이터와 다트에 적어도 (일반 JS 모르는)의.
또한보십시오
이 저장소에는 Http @ angular / core-like 서비스에 대한 구현이 있습니다 : https://github.com/voliva/angular2-interceptors
부트 스트랩에서 해당 서비스에 대한 공급자를 선언하고 필요한 인터셉터를 추가하면 모든 구성 요소에 사용할 수 있습니다.
import { provideInterceptorService } from 'ng2-interceptors';
@NgModule({
declarations: [
...
],
imports: [
...,
HttpModule
],
providers: [
MyHttpInterceptor,
provideInterceptorService([
MyHttpInterceptor,
/* Add other interceptors here, like "new ServerURLInterceptor()" or
just "ServerURLInterceptor" if it has a provider */
])
],
bootstrap: [AppComponent]
})
Angular 4.3 이후 사용 중단됨 (HttpInterCeptors가 4.3에서 돌아옴)
사용자 지정 HTTP 클래스를 생성하고 rxjs 주제 서비스를 사용하여 사용자 지정 Http 클래스를 재사용하고 사용자 지정 클래스에서 동작을 구현할 수 있습니다.
일부 rxjs 주제를 포함하는 "HttpSubjectService"를 사용하여 사용자 정의 Http 클래스 구현.
import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { HttpSubjectService } from './httpSubject.service';
@Injectable()
export class CustomHttp extends Http {
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private httpSubjectService: HttpSubjectService) {
super(backend, defaultOptions);
//Prevent Ajax Request Caching for Internet Explorer
defaultOptions.headers.append("Cache-control", "no-cache");
defaultOptions.headers.append("Cache-control", "no-store");
defaultOptions.headers.append("Pragma", "no-cache");
defaultOptions.headers.append("Expires", "0");
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
//request Start;
this.httpSubjectService.addSpinner();
return super.request(url, options).map(res => {
//Successful Response;
this.httpSubjectService.addNotification(res.json());
return res;
})
.catch((err) => {
//Error Response.
this.httpSubjectService.removeSpinner();
this.httpSubjectService.removeOverlay();
if (err.status === 400 || err.status === 422) {
this.httpSubjectService.addHttp403(err);
return Observable.throw(err);
} else if (err.status === 500) {
this.httpSubjectService.addHttp500(err);
return Observable.throw(err);
} else {
return Observable.empty();
}
})
.finally(() => {
//After the request;
this.httpSubjectService.removeSpinner();
});
}
}
CustomHttp 클래스를 등록하는 사용자 지정 모듈-여기에서 Angular의 기본 Http 구현을 고유 한 CustomHttp 구현으로 덮어 씁니다.
import { NgModule, ValueProvider } from '@angular/core';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';
//Custom Http
import { HttpSubjectService } from './httpSubject.service';
import { CustomHttp } from './customHttp';
@NgModule({
imports: [ ],
providers: [
HttpSubjectService,
{
provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, httpSubjectService: HttpSubjectService) => {
return new CustomHttp(backend, defaultOptions, httpSubjectService);
},
deps: [XHRBackend, RequestOptions, HttpSubjectService]
}
]
})
export class CustomHttpCoreModule {
constructor() { }
}
이제 우리는 "next"문으로 호출 될 때 rxjs 주제를 구독 할 수있는 HttpSubjectService 구현이 필요합니다.
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class HttpSubjectService {
//https://github.com/ReactiveX/rxjs/blob/master/doc/subject.md
//In our app.component.ts class we will subscribe to this Subjects
public notificationSubject = new Subject();
public http403Subject = new Subject();
public http500Subject = new Subject();
public overlaySubject = new Subject();
public spinnerSubject = new Subject();
constructor() { }
//some Example methods we call in our CustomHttp Class
public addNotification(resultJson: any): void {
this.notificationSubject.next(resultJson);
}
public addHttp403(result: any): void {
this.http403Subject.next(result);
}
public addHttp500(result: any): void {
this.http500Subject.next(result);
}
public removeOverlay(): void {
this.overlaySubject.next(0);
}
public addSpinner(): void {
this.spinnerSubject.next(1);
}
public removeSpinner(): void {
this.spinnerSubject.next(-1);
}
}
사용자 정의 구현을 호출하려면 "app.component.ts"에서 주제를 구독해야합니다.
import { Component } from '@angular/core';
import { HttpSubjectService } from "../HttpInterception/httpSubject.service";
import { Homeservice } from "../HttpServices/home.service";
@Component({
selector: 'app',
templateUrl: './app.component.html',
})
export class AppComponent {
private locals: AppLocalsModel = new AppLocalsModel();
constructor(private httpSubjectService : HttpSubjectService, private homeService : Homeservice) {}
ngOnInit(): void {
this.notifications();
this.httpRedirects();
this.spinner();
this.overlay();
}
public loadServiceData(): void {
this.homeService.getCurrentUsername()
.subscribe(result => {
this.locals.username = result;
});
}
private overlay(): void {
this.httpSubjectService.overlaySubject.subscribe({
next: () => {
console.log("Call Overlay Service");
}
});
}
private spinner(): void {
this.httpSubjectService.spinnerSubject.subscribe({
next: (value: number) => {
console.log("Call Spinner Service");
}
});
}
private notifications(): void {
this.httpSubjectService.notificationSubject.subscribe({
next: (json: any) => {
console.log("Call Notification Service");
}
});
}
private httpRedirects(): void {
this.httpSubjectService.http500Subject.subscribe({
next: (error: any) => {
console.log("Navigate to Error Page");
}
});
this.httpSubjectService.http403Subject.subscribe({
next: (error: any) => {
console.log("Navigate to Not Authorized Page");
}
});
}
}
class AppLocalsModel {
public username : string = "noch nicht abgefragt";
}
ANGULAR 4.3부터 InterCeptors를 사용할 수 있습니다.
Angular 4.3에는 서버 오류 500에 대한 리디렉션과 같은 자체 작업을 구현할 수있는 네이티브 인터셉터가 있습니다.
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class SxpHttp500Interceptor implements HttpInterceptor {
constructor(public router: Router) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).do(evt => { }).catch(err => {
if (err["status"]) {
if (err.status === 500) {
this.router.navigate(['/serverError', { fehler: JSON.stringify(err) }]);
}
}
return Observable.throw(err);
});
}
}
공급자 배열의 핵심 모듈에 이것을 등록해야합니다.
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Router } from '@angular/router';
import { SxpHttp500Interceptor } from "./sxpHttp500.interceptor";
....
providers: [
{
provide: HTTP_INTERCEPTORS, useFactory: (router: Router) => { return new SxpHttp500Interceptor(router) },
multi: true,
deps: [Router]
}
]
Angular 4.3.1 릴리스에는 이제 HttpInterceptor 라는 인터페이스가 있습니다 .
다음은 문서에 대한 링크입니다. https://angular.io/api/common/http/HttpInterceptor
다음은 구현 샘플입니다.
이것이 인터셉터 클래스 구현입니다.
기본적으로 다른 서비스로 작성됩니다.
@Injectable()
export class ExceptionsInterceptor implements HttpInterceptor {
constructor(
private logger: Logger,
private exceptionsService: ExceptionsService,
private notificationsService: NotificationsService
) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request)
.do((event) => {
// Do nothing here, manage only errors
}, (err: HttpErrorResponse) => {
if (!this.exceptionsService.excludeCodes.includes(err.status)) {
if (!(err.status === 400 && err.error['_validations'])) {
this.logger.error(err);
if (!this.notificationsService.hasNotificationData(err.status)) {
this.notificationsService.addNotification({ text: err.message, type: MessageColorType.error, data: err.status, uid: UniqueIdUtility.generateId() });
}
}
}
});
}
}
Then since you'll treat this like a normal service, you have to add this line inside your app module's providers:
{ provide: HTTP_INTERCEPTORS, useClass: ExceptionsInterceptor, multi: true }
Hope it can help.
Angular 4.3 now supports Http interceptor out-of-the-box. Check it out how to use them: https://ryanchenkie.com/angular-authentication-using-the-http-client-and-http-interceptors
I have released interceptor with following node module. We was create this module for our internal purpose finally we released in npm package manager npm install angular2-resource-and-ajax-interceptor https://www.npmjs.com/package/angular2-resource-and-ajax-interceptor
As @squadwuschel pointed out, work is underway to get this functionality into @angular/http. This will be in the form of a new HttpClient API.
See https://github.com/angular/angular/pull/17143 for more details and current status.
Angular2 donot support httpinterceptor like angular1
Here is awesome example of use of httpinterceptor in angular2.
https://github.com/NgSculptor/ng2HttpInterceptor
Try Covalent from Teradata, they provides lots of extensions for Angular and Angular Material.
Check HTTP part, it provides the missing http interceptor in Angular and RESTService(similar to restangular).
I have implemented JWT token authentication via Covalent HTTP in my sample, Please check here.
https://github.com/hantsy/angular2-material-sample/blob/master/src/app/core/auth-http-interceptor.ts
Read my development notes for it, Handle token based Authentication via IHttpInterceptor.
ReferenceURL : https://stackoverflow.com/questions/35498456/what-is-httpinterceptor-equivalent-in-angular2
'development' 카테고리의 다른 글
| concat과 uglify 및 minify의 차이점은 무엇입니까? (0) | 2021.01.06 |
|---|---|
| 진자에서 문자열을 목록으로 분할 하시겠습니까? (0) | 2021.01.06 |
| 2 차원 배열을 기반으로 WPF 그리드를 채우는 방법 (0) | 2021.01.06 |
| C #에서 함수를 매개 변수로 전달하는 방법은 무엇입니까? (0) | 2021.01.06 |
| 매개 변수없이 MethodInfo.Invoke (0) | 2021.01.06 |