Providerを使うと綺麗に書ける
Componentの中に直接書くこともできると思う。
しかし、Providerを使うことで綺麗に書ける。
Providerを作る
以下のコマンドでコマンドラインから作ることが出来ます。
ionic generate provider {任意のproviderの名前}
Providerを書く(の前に)
HTTPリクエストをどこでも使えるようにapp.module.tsにHttpClientModuleを追加します。
...
{色々importされている}
import { HttpClientModule } from '@angular/common/http'; // これを追加
@NgModule({
declarations: [...],
imports: [
...,
HttpClientModule // これを追加
],
...
Providerを書く
先程作ったProviderの方ではHttpClient, Observableがimportされている必要があります。
getFullData関数が今回データを得る際に呼び出す関数になります。
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class CrimeDataProvider {
constructor(public http: HttpClient) {
}
getFullData(): Observable<{受け取るデータの形}> {
const url = {任意のurl};
return this.http.get<{受け取るデータの形}>(`${url}`);
}
}
HttpClientのget関数はObservableを返します。
データを受け取る処理を書く
まず、データを使いたいComponentの中で、
constructor(private crimeDataProvider: CrimeDataProvider) {}
のような形でProviderを使う準備をします。
そして、
loadData(): void {
this.crimeDataProvider.getFullData().subscribe((datas) => {
{datasに好きな処理をすることができる}
});
}
（関数の名前がloadDataである必要はない。）
