Angularでは、外部APIと通信するためにHttpClientModuleを使用します。
REST APIとの接続、データの取得・送信・更新・削除を行う方法を学び、Observableとsubscribeによる非同期処理、簡単な一覧表示も実装していきます。
1. HttpClientModuleのインポートと使い方
HTTP通信を行うには、まずHttpClientModuleをAppModuleにインポートします。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [BrowserModule, HttpClientModule]
})
次に通信処理を担当するサービスを作成します。
ng generate service api
1. HttpClientModuleのインポートと使い方
HTTP通信を行うには、まずHttpClientModuleをAppModuleにインポートします。
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [BrowserModule, HttpClientModule]
})
次に通信処理を担当するサービスを作成します。
ng generate service api
2. GET / POST / PUT / DELETE リクエスト
APIサービス内で以下のようにメソッドを定義します。
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class ApiService {
private baseUrl = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) {}
getPosts(): Observable<any[]> {
return this.http.get<any[]>(this.baseUrl);
}
addPost(post: any): Observable<any> {
return this.http.post(this.baseUrl, post);
}
updatePost(id: number, post: any): Observable<any> {
return this.http.put(`${this.baseUrl}/${id}`, post);
}
deletePost(id: number): Observable<any> {
return this.http.delete(`${this.baseUrl}/${id}`);
}
}
3. 非同期処理：ObservableとSubscribe
HTTP通信のレスポンスは非同期で返るため、Observableをsubscribeして処理します。
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-posts',
templateUrl: './posts.component.html'
})
export class PostsComponent implements OnInit {
posts: any[] = [];
constructor(private api: ApiService) {}
ngOnInit(): void {
this.api.getPosts().subscribe(data => {
this.posts = data;
});
}
}
4. APIと接続したデータ一覧表示
テンプレート側では、取得したデータを*ngForでループ表示します。
<h2>記事一覧</h2>
<ul>
<li *ngFor="let post of posts">
<strong>{{ post.title }}</strong><br>
{{ post.body }}
</li>
</ul>
まとめ
AngularではHttpClientを用いてAPIと連携し、データを非同期にやり取りできます。
Observableとsubscribeにより、非同期処理も簡潔に実装でき、外部APIと接続するダイナミックなアプリケーションが構築可能になります。
