Way of httpInterceptor in Angular 2

4/10 に開催された[Angular 2 ハンズオン](http://connpass.com/event/28985/)のチューターとして参加してきました。  
チューターしている合間に、Angular2 での HttpIntercepor のやり方を調べてたので、その辺りを紹介します。



ついでに LT してきました。LT の資料はこちらです。

Angular2 HttpInterceptor Needed  
<https://gist.github.com/mitsuruog/6f7f0ca3f546b245bccdd3ebc14375d8>

## HttpInterceptor とは

`HttpInterceptor`とは、XHR(つまり Ajax)に関連する横断的機能(cross-cutting feature)を分離するためのものです。

Controller などの後続処理から、XHR 通信時に発生する例外処理などを分離して`HttpInterceptor`で一括処理します。
Angular1 では、`HttpInterceptor`を使うことで綺麗に分離することができました。

refs: [AngularJS: API: $http](https://docs.angularjs.org/api/ng/service/$http)

## Angular2 では簡単にはできない

Angular2 でも簡単に実現できると考えていたのですが、思ったより面倒でした。
公式リポジトリの Issue にて実現方法について議論されていました。(めっちゃ長いです)

[RFC: Http interceptors and transformers · Issue #2684 · angular/angular](https://github.com/angular/angular/issues/2684)

## Angualr2 での HttpInterceptor の実現方法

以下の手順で実現できます。

1. `Http`を継承した`CustomHttp`を作成する。
1. `bootstrap`にて、既存の`Http`プロバイダを Ovarride する。

では順に見て行きましょう。

### `CustomHttp`を作成する

まず、`CustomHttp`を作成します。`Http`の API を 1 つ 1 つ Warp します。  
例外が発生した場合は、`catch`で捕捉して private 関数の`handleResponseError`で一括処理させるようにしています。

**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((res: Response) => this.handleResponseError(res));
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    return super
      .get(url, options)
      .catch((res: Response) => this.handleResponseError(res));
  }

  // ...長いので省略

  //
  // Here's to handle error stuff
  //
  private handleResponseError(res: Response) {
    if (res.status === 401) {
      // do something
    } else if (res.status === 500) {
      // do something
    }
    return Observable.throw(res);
  }
}
```

### `Http`を上書きする。

つづいて、`bootstrap`時に`Http`を`CustomHttp`で上書きします。
次のコードは、`provide`を利用して、Angular2 が DI を処理する際にインスタンスを生成する方法を変更しています。

**main.ts**

```ts
import { provide } from "angular2/core";
// RxJS本体のObservableを利用するための設定
import { bootstrap } from "angular2/platform/browser";
import "rxjs/Rx";

import { AppComponent } from "./app.component";
import { CustomHttp } from "./common/services/custom-http.service";

bootstrap(AppComponent, [
  provide(Http, {
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
      return new CustomHttp(backend, defaultOptions);
    },
    deps: [XHRBackend, RequestOptions],
  }),
]);
```

## まとめ

Angular2 でも`HttpInterceptor`を実現できそうですが、少し面倒でした。

こちらに`custom-http.service.ts`のコード置いておきます。(しばらくはこのままで使えるはず。。。)

[custom-http.service.ts](https://gist.github.com/mitsuruog/6f7f0ca3f546b245bccdd3ebc14375d8#file-custom-http-service-ts)

> (追記)
> LT では`new Providor()`としていましたが、 [@laco0416](https://twitter.com/laco0416)さんから、
> `Providor`を Warp している`provide`を利用した方が破壊的変更が起きにくいとアドバイスいただき変更しました。ありがとうございます！！

Angular2でHTTP Interceptorを使いたい

4 月から Web サービス会社にフロントエンドエンジニアとして Join しました。
新卒で就職して以降、多くの時間(※)を SI として過ごしてきたので、今回は大きなチャレンジとなりそうです。

ちなみに、この文書は 5 年後の自分に当てたポエムです。



(※)途中、料理人と家具職人を 4 年ほどやっていました。

## 5 年後のなりたい自分になるために転職を決意した

御年 39 歳。

昨年の 5 月に転職したばかりなのですが、振り返ると「 **人は何のために働くのか？** 」ということで悩み続けた 1 年でした。

悩んだ末の結論は、年齢や立場で左右されることなく、純粋に「やりたいことをやり続ける」というものでした。

前回の反省から学んだことは、やりたいことをやり続けている方が幸せで、幸せを感じていないと周囲にいい影響を与える続けることはできないということでした。
私は、周囲を幸せにするため、あえて自分のエゴを通し自分を幸せにする道を選びました。

やりたい事とはもちろんフロントエンドの仕事です。

## これから何をするのか？

これからはフロントエンドエンジニアとして、サービスのフロントエンドの開発を取り仕切る立場となります。

それ以外で目標としていることを、未来の自分のために書きます。

### エンジニアの成長をサポートする

自身の持っているスキルを必要とする人がいて、それを教えることで、人の人生を豊かにできる可能性がある。

私は、フロントエンドの技術を習得する過程で多くの喜びや達成感を味わい、かけがえのない仲間と知り合うことができました。
これからもハンズオンなどを通じて、人の成長をサポートしていきたいと考えています。

エンジニアの成長を支援するサービスを作成している会社なので、自身のやりたいことの延長を仕事にすることができそうです。

### グローバルに活躍する

言うまでもなく、これからは英語が必須ですね。

とにかく英語のアウトプットの機会に飢えていました。
今いるところは海外のエンジニア多く、普段のやりとりはすべて英語となります。そういった環境に飛び込んで、英語を徹底的に鍛えたいと思いました。

人生一度しかないので、1 回くらい家族を連れて海外で仕事をしてみたいです。まだまだ人生チャレンジしないと損ですね。

### これまでの「べき論」を捨て、新しい自分になる

35 歳でフロントエンドエンジニアを志して、4 年でここまで来ることができました。

振り返ると様々な困難や不安、焦りに対してたくさんの「 **べき** 」を積み重ね、自分を奮い立たせて来たように思います。
その過程で、自分の思考に偏りができてきたように感じており、過去に遡ると正しい判断ができてなかったなと思うことが多くなってきました。

おそらくこの転職を決意できた背景にも、いろいろな **べき** を捨てたからこそできたと思います。

私は今回の転職を機に自分の中のたくさんの **べき** をリセットし、今後は不用意な **べき** を利用することを避け、不用意な **べき** で自分を縛り不幸にしないようしたいと思います。

## 最後に

今回無事に転職ができたのは、自分のことを心配し見守って、手を差し伸べてくれる素晴らしい知人に恵まれていたからです。

今後は自分が関わる人への感謝を忘れず、自身が幸せであることを保ち、お互いが支え合える関係を維持していけるよう努力し続けたいと思います。

5 年後はどうなっているかな。
頑張れ自分。

April, 2016

Angular2でHTTP Interceptorを使いたい

SIを辞めてWebサービスに転職しました