Angular HTTP

Angular HTTPを使ったHTTP通信の理解

このガイドでは、AngularアプリケーションにおけるHTTP通信の基本概念と実装方法について詳しく解説します。HTTPクライアントを利用して、外部APIとのデータのやり取りを容易に行うことができます。具体的なコード例を通じて、リクエストとレスポンスの処理方法を学びましょう。

Angular HTTPクライアントの使用方法

AngularのHTTPクライアントモジュールは、APIからデータを取得するための便利なツールを提供します。GET、POST、PUT、DELETEリクエストの具体的な方法を学び、エラーハンドリングやデータの変換技術についても触れます。この機能を使うことで、アプリケーションのバックエンドとの連携がシームレスになります。

HTTPクライアントのインポート

AngularのHTTPクライアントを使用するためには、最初に必要なモジュールをインポートします。


import { HttpClientModule } from '@angular/common/http';

GETリクエストの例

以下のコードスニペットは、GETリクエストを送信する方法を示しています。


import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {
  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(data => {
      console.log(data);
    });
  }
}

POSTリクエストの例

次に、POSTリクエストの実装方法を示します。


addData(newData: any) {
  this.http.post('https://api.example.com/data', newData).subscribe(response => {
    console.log(response);
  });
}

HTTPリクエストのエラーハンドリング

HTTPリクエストでは、エラーハンドリングが重要です。以下は、エラーハンドリングの実装例です。


fetchData() {
  this.http.get('https://api.example.com/data').subscribe(
    data => {
      console.log(data);
    },
    error => {
      console.error('エラーが発生しました: ', error);
    }
  );
}

HTTPクライアントサービスの主要機能

以下では、AngularのHTTPクライアントサービスが提供する代表的な機能について解説します。

型付きの応答値をリクエストする機能

HttpClientは、サーバーから取得するデータに対して型を指定することができます。これにより、型安全なコードが書け、エラーが発生しにくくなります。


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
}

上記のコード例では、User型の配列としてデータを取得しています。このように型を指定することで、IDEがコードの補完を行い、開発が効率化されます。

簡素化されたエラー処理

HttpClientはcatchErrorオペレーターを用いて、簡単にエラーをキャッチし、ハンドリングすることができます。


import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com/data';

  constructor(private http: HttpClient) {}

  getData(): Observable {
    return this.http.get(this.apiUrl).pipe(
      catchError(this.handleError)
    );
  }

  private handleError(error: HttpErrorResponse) {
    console.error('エラーが発生しました:', error.message);
    return throwError('サーバーとの通信に失敗しました。');
  }
}

上記の例では、handleErrorメソッドを使用してエラーをキャッチし、ユーザーに適切なメッセージを返すことができます。

リクエストとレスポンスのインターセプション

HttpInterceptorを使用することで、リクエストとレスポンスをインターセプトし、共通の処理を追加することが可能です。これにより、例えばリクエストに共通の認証ヘッダーを追加したり、レスポンスのエラーハンドリングを一元化することができます。


import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
    const authReq = req.clone({
      headers: req.headers.set('Authorization', 'Bearer token')
    });
    return next.handle(authReq);
  }
}

このコードでは、HttpInterceptorを実装し、全てのリクエストにAuthorizationヘッダーを追加しています。

強力なテストユーティリティ

HttpClientは、ユニットテストの際にHttpTestingControllerを使用することで、容易にモック通信をシミュレーションできます。


import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { UserService } from './user.service';
import { User } from './user';

describe('UserService', () => {
  let service: UserService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [UserService]
    });
    service = TestBed.inject(UserService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should retrieve users from API via GET', () => {
    const dummyUsers: User[] = [
      { id: 1, name: 'John', email: '[email protected]' },
      { id: 2, name: 'Doe', email: '[email protected]' }
    ];

    service.getUsers().subscribe(users => {
      expect(users.length).toBe(2);
      expect(users).toEqual(dummyUsers);
    });

    const request = httpMock.expectOne(`${service['apiUrl']}`);
    expect(request.request.method).toBe('GET');
    request.flush(dummyUsers);
  });

  afterEach(() => {
    httpMock.verify();
  });
});

このテストコードでは、HTTPリクエストが適切に発行されているか、モックデータを用いて確認することができます。

まとめ

AngularのHTTPクライアントモジュールを使用することで、簡単に外部APIと連携し、データをやり取りすることができます。GET、POST、PUT、DELETEリクエストの実行方法やエラーハンドリングを学ぶことで、アプリケーションの信頼性を向上させることが可能となります。

HTTPメソッド	説明
GET	データの取得
POST	新しいデータの追加
PUT	既存データの更新
DELETE	データの削除

参考文献:

Angular公式ガイド - HTTP

QA

Q: AngularのHTTPクライアントを使うためには何をインポートする必要がありますか？
A: 'HttpClientModule'をインポートする必要があります。
Q: エラーハンドリングにはどのように対応すればよいですか？
A: 'subscribe'メソッドの第2引数にエラーハンドリングのロジックを記述します。
Q: リクエストメソッドの中で、どのようにしてデータを送信できますか？
A: 'post'メソッドを利用して、ボディにデータを含めることができます。

その他の参考記事:angular httpclient