mitsuruog · August 16, 2016 02:55 · Apr 12, 2016 · Apr 12, 2016 · Apr 11, 2016 · Apr 10, 2016
diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -46,11 +46,11 @@ export class CustomHttp extends Http {
     }
 
     request(url:string | Request, options?:RequestOptionsArgs):Observable<Response> {
-        return super.request(url, options).catch(this.handleResponseError);
+        return super.request(url, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     get(url:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.get(url, options).catch(this.handleResponseError);
+        return super.get(url, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     // ...長いので省略

diff --git a/custom-http.service.ts b/custom-http.service.ts
@@ -8,41 +8,41 @@ export class CustomHttp extends Http {
     }
 
     request(url:string | Request, options?:RequestOptionsArgs):Observable<Response> {
-        return super.request(url, options).catch(this.handleResponseError);
+        return super.request(url, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     get(url:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.get(url, options).catch(this.handleResponseError);
+        return super.get(url, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     post(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.post(url, body, options).catch(this.handleResponseError)
+        return super.post(url, body, options).catch((res: Response) => this.handleResponseError(res))
     }
 
     put(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.put(url, body, options).catch(this.handleResponseError);
+        return super.put(url, body, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     delete(url:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.delete(url, options).catch(this.handleResponseError);
+        return super.delete(url, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     patch(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.patch(url, body, options).catch(this.handleResponseError);
+        return super.patch(url, body, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     head(url:string, options?:RequestOptionsArgs):Observable<Response> {
-        return super.head(url, options).catch(this.handleResponseError);
+        return super.head(url, options).catch((res: Response) => this.handleResponseError(res));
     }
 
     private handleResponseError(res:Response) {
 
         console.log(res);
 
         if (res.status === 401) {
-          // do something
+            // do something
         } else if (res.status === 500) {
-          // do something
+            // do something
         }
         return Observable.throw(res);
 

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -31,14 +31,6 @@ following step
 1. 既存のHttpをOverrideするための`CustomHttp`サービスを作成する
 2. `bootstrap`で既存のHttpをOverideする
 
-> :warning:   
-Angular2は`RxJS`のAPIをWarpしているが、`RxJS`のすべてのAPIを提供していない。  
-`RsJS`のAPIをフルで利用したい場合は、`main.ts`で`RxJS`を直接importする必要がある。  
-> **main.ts**
-> ```ts
-import 'rxjs/Rx';
-```
-
 ### Create a `CustomHttp` service
 
 **custom-http.service.ts**
@@ -87,13 +79,13 @@ export class CustomHttp extends Http {
 import 'rxjs/Rx';
 
 import {bootstrap} from 'angular2/platform/browser';
-import {Provider} from "angular2/core";
+import {provide} from "angular2/core";
 
 import {AppComponent} from './app.component';
 import {CustomHttp} from "./common/services/custom-http.service";
 
 bootstrap(AppComponent, [
-    new Provider(Http, {
+    provide(Http, {
         useFactory: (backend:XHRBackend, defaultOptions:RequestOptions) => {
             return new CustomHttp(backend, defaultOptions)
         },
@@ -102,6 +94,15 @@ bootstrap(AppComponent, [
 ]);
 ```
 
+
+> :warning:   
+Angular2は`RxJS`のAPIをWarpしているが、`RxJS`のすべてのAPIを提供していない。  
+`RsJS`のAPIをフルで利用したい場合は、`main.ts`で`RxJS`を直接importする必要がある。  
+> **main.ts**
+> ```ts
+import 'rxjs/Rx';
+```
+
 ## Conclusion
 
 - Angualr2でもAngular1のHttpInterceptorと近いことはできる。

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -61,7 +61,7 @@ export class CustomHttp extends Http {
         return super.get(url, options).catch(this.handleResponseError);
     }
 
-    // ...
+    // ...長いので省略
 
     //
     // Here's to handle error stuff
@@ -77,6 +77,9 @@ export class CustomHttp extends Http {
 }
 ```
 
+全体像はこちらを見てください。  
+[custom-http.service.ts](https://gist.github.com/mitsuruog/6f7f0ca3f546b245bccdd3ebc14375d8#file-custom-http-service-ts)
+
 ### Override `Http` to `CustomHttp` at `bootstrap`
 
 **main.ts**

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -102,4 +102,5 @@ bootstrap(AppComponent, [
 ## Conclusion
 
 - Angualr2でもAngular1のHttpInterceptorと近いことはできる。
-- ただ、少し面倒だ。
+- ただ、少し面倒だ。
+  - 使えそうなもの置いておきます => [custom-http.service.ts](https://gist.github.com/mitsuruog/6f7f0ca3f546b245bccdd3ebc14375d8#file-custom-http-service-ts) 
diff --git a/custom-http.service.ts b/custom-http.service.ts
@@ -0,0 +1,50 @@
+import {Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response} from "angular2/http";
+import {Observable} from "rxjs/Observable";
+
+export class CustomHttp extends Http {
+
+    constructor(backend:ConnectionBackend, defaultOptions:RequestOptions) {
+        super(backend, defaultOptions)
+    }
+
+    request(url:string | Request, options?:RequestOptionsArgs):Observable<Response> {
+        return super.request(url, options).catch(this.handleResponseError);
+    }
+
+    get(url:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.get(url, options).catch(this.handleResponseError);
+    }
+
+    post(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.post(url, body, options).catch(this.handleResponseError)
+    }
+
+    put(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.put(url, body, options).catch(this.handleResponseError);
+    }
+
+    delete(url:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.delete(url, options).catch(this.handleResponseError);
+    }
+
+    patch(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.patch(url, body, options).catch(this.handleResponseError);
+    }
+
+    head(url:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.head(url, options).catch(this.handleResponseError);
+    }
+
+    private handleResponseError(res:Response) {
+
+        console.log(res);
+
+        if (res.status === 401) {
+          // do something
+        } else if (res.status === 500) {
+          // do something
+        }
+        return Observable.throw(res);
+
+    }
+}
diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -5,7 +5,7 @@
 - **小川充**
   - [@mitsuruog](https://github.com/mitsuruog)
   - Front-end Developer in Givery inc.
-  - Angular User Group Stuff.
+  - Angular User Group Staff.
 
 ## HttpInterceptorとは
 

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -2,6 +2,11 @@
 
 ## Who am I
 
+- **小川充**
+  - [@mitsuruog](https://github.com/mitsuruog)
+  - Front-end Developer in Givery inc.
+  - Angular User Group Stuff.
+
 ## HttpInterceptorとは
 
 - XHRに関連する横断的機能(cross-cutting)を分離する

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -58,6 +58,9 @@ export class CustomHttp extends Http {
 
     // ...
 
+    //
+    // Here's to handle error stuff
+    // 
     private handleResponseError(res:Response) {
         if (res.status === 401) {
           // do something

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -26,12 +26,11 @@ following step
 1. 既存のHttpをOverrideするための`CustomHttp`サービスを作成する
 2. `bootstrap`で既存のHttpをOverideする
 
-> :warning: 
-Angular2は`RxJS`のAPIをWarpしているが、`RxJS`のすべてのAPIを提供していない。
-`RsJS`のAPIをフルで利用したい場合は、`main.ts`で`RxJS`を直接importする必要がある。
-
-**main.ts**
-```ts
+> :warning:   
+Angular2は`RxJS`のAPIをWarpしているが、`RxJS`のすべてのAPIを提供していない。  
+`RsJS`のAPIをフルで利用したい場合は、`main.ts`で`RxJS`を直接importする必要がある。  
+> **main.ts**
+> ```ts
 import 'rxjs/Rx';
 ```
 

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -26,7 +26,14 @@ following step
 1. 既存のHttpをOverrideするための`CustomHttp`サービスを作成する
 2. `bootstrap`で既存のHttpをOverideする
 
-:warning:
+> :warning: 
+Angular2は`RxJS`のAPIをWarpしているが、`RxJS`のすべてのAPIを提供していない。
+`RsJS`のAPIをフルで利用したい場合は、`main.ts`で`RxJS`を直接importする必要がある。
+
+**main.ts**
+```ts
+import 'rxjs/Rx';
+```
 
 ### Create a `CustomHttp` service
 

diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -63,7 +63,7 @@ export class CustomHttp extends Http {
 }
 ```
 
-### Override `Http` at `bootstrap`
+### Override `Http` to `CustomHttp` at `bootstrap`
 
 **main.ts**
 ```ts
@@ -85,4 +85,7 @@ bootstrap(AppComponent, [
 ]);
 ```
 
-## 
+## Conclusion
+
+- Angualr2でもAngular1のHttpInterceptorと近いことはできる。
+- ただ、少し面倒だ。
diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -10,18 +10,79 @@
 - Angular1ではHttpInterceptorを使うことで、これらを綺麗に分離できた
   - refs: [AngularJS: API: $http](https://docs.angularjs.org/api/ng/service/$http)
 
-## Way of httpInterceptor in Angular 2
+## How about a httpInterceptor in Angular 2 ?
 
 結論
 
-簡単にできない！！
+**簡単にできない！！**
 
 - この長いスレ
   - [RFC: Http interceptors and transformers · Issue #2684 · angular/angular](https://github.com/angular/angular/issues/2684)
 
-## Angular2で
+## Way of httpInterceptor in Angular 2
+
+following step
+
+1. 既存のHttpをOverrideするための`CustomHttp`サービスを作成する
+2. `bootstrap`で既存のHttpをOverideする
+
+:warning:
 
-## 
+### Create a `CustomHttp` service
 
+**custom-http.service.ts**
 ```ts
-```
+import {Http, ConnectionBackend, RequestOptions, Request, RequestOptionsArgs, Response} from "angular2/http";
+import {Observable} from "rxjs/Observable";
+
+export class CustomHttp extends Http {
+
+    constructor(backend:ConnectionBackend,
+                defaultOptions:RequestOptions) {
+        super(backend, defaultOptions)
+    }
+
+    request(url:string | Request, options?:RequestOptionsArgs):Observable<Response> {
+        return super.request(url, options).catch(this.handleResponseError);
+    }
+
+    get(url:string, options?:RequestOptionsArgs):Observable<Response> {
+        return super.get(url, options).catch(this.handleResponseError);
+    }
+
+    // ...
+
+    private handleResponseError(res:Response) {
+        if (res.status === 401) {
+          // do something
+        } else if (res.status === 500) {
+          // do something
+        }
+        return Observable.throw(res);
+    }
+}
+```
+
+### Override `Http` at `bootstrap`
+
+**main.ts**
+```ts
+import 'rxjs/Rx';
+
+import {bootstrap} from 'angular2/platform/browser';
+import {Provider} from "angular2/core";
+
+import {AppComponent} from './app.component';
+import {CustomHttp} from "./common/services/custom-http.service";
+
+bootstrap(AppComponent, [
+    new Provider(Http, {
+        useFactory: (backend:XHRBackend, defaultOptions:RequestOptions) => {
+            return new CustomHttp(backend, defaultOptions)
+        },
+        deps: [XHRBackend, RequestOptions]
+    })
+]);
+```
+
+## 
diff --git a/Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed.md
@@ -4,9 +4,10 @@
 
 ## HttpInterceptorとは
 
-- XHRに関連する横断的機能(cross-cutting)を分離したい！
-  - Global Error handling.
-- Angular1ではHttpInterceptorを使うことで綺麗に分離できた
+- XHRに関連する横断的機能(cross-cutting)を分離する
+  - Global Error handling
+  - Fail back to show notification
+- Angular1ではHttpInterceptorを使うことで、これらを綺麗に分離できた
   - refs: [AngularJS: API: $http](https://docs.angularjs.org/api/ng/service/$http)
 
 ## Way of httpInterceptor in Angular 2

diff --git a/Angular2 HttpInterceptor Needed → Angular2 HttpInterceptor Needed.md b/Angular2 HttpInterceptor Needed → Angular2 HttpInterceptor Needed.md
diff --git a/Angular2 HttpInterceptor Needed b/Angular2 HttpInterceptor Needed
@@ -0,0 +1,26 @@
+# Angular2 HttpInterceptor Needed
+
+## Who am I
+
+## HttpInterceptorとは
+
+- XHRに関連する横断的機能(cross-cutting)を分離したい！
+  - Global Error handling.
+- Angular1ではHttpInterceptorを使うことで綺麗に分離できた
+  - refs: [AngularJS: API: $http](https://docs.angularjs.org/api/ng/service/$http)
+
+## Way of httpInterceptor in Angular 2
+
+結論
+
+簡単にできない！！
+
+- この長いスレ
+  - [RFC: Http interceptors and transformers · Issue #2684 · angular/angular](https://github.com/angular/angular/issues/2684)
+
+## Angular2で
+
+## 
+
+```ts
+```