【ionic2】apiリクエストをproviderで共通処理化する
APIのURLを開発と本番で切り替える
こちらのURLのとおりにやったらできた。
http://roblouie.com/article/296/ionic-2-environment-variables-the-best-way/
webpackの設定とかはURLのとおりにやればできる。あとは以下のように各々呼び出せるようになる。
import { Injectable, Inject } from '@angular/core'; import { EnvVariables } from '../app/environment-variables/environment-variables.token'; @Injectable() export class ApiService { constructor(http: Http, @Inject(EnvVariables) public envVariables) { } test() { // this.envVariables.apiEndpoint } }
今回は上の記事に書いてあるそのまんまつかわせてもらった。
src/app/environment-variables/development.ts
export const devVariables = { apiEndpoint: 'http://dev.example.com', }
src/app/environment-variables/production.ts
export const prodVariables = { apiEndpoint: 'http://prod.example.com', }
APIリクエストを共通化する
Angularではproviderとして作るのが一般的ぽいのでそのようにしてみる。
ひな形作成
$ ionic g provider api-service
実行すると src/providers/api-service.ts が生成されるのでここに実装する。
今回は認証用のトークンをローカルストレージに保存しておいて、リクエストのたびにhttpヘッダーにさしこむようにした。
src/providers/api-service.ts
import { Injectable, Inject } from '@angular/core'; import { Http, Headers } from '@angular/http'; import 'rxjs/add/operator/map'; import { Storage } from '@ionic/storage'; import { EnvVariables } from '../app/environment-variables/environment-variables.token'; @Injectable() export class ApiService { constructor(public http: Http, @Inject(EnvVariables) public envVariables, private storage: Storage) { /* コンストラクタ */ } request(method, action, params) { return new Promise((resolve, reject) => { this.storage.get('auth.token') .then(token => { var url = this.envVariables.apiEndpoint + action; var http = null; var headers = { headers: new Headers({ 'Authorization': 'Token ' + token }) }; if (method == 'get') { http = this.http.get(url, headers) } else if (method == 'post') { http = this.http.post(url, data, headers) } if (http !== null) { http.subscribe((response) => { if (response.status == 200) { var result = response.json(); if (result.status == "success") { resolve(result); } else { reject(result.messages); } } else { reject('通信エラーが発生しました'); } },err => { reject(err); }); } }); }); } get(url, params) { return this.request('get', url, params); } post(url, data) { return this.request('post', url, params); } }
これでコンポーネントから呼び出せる
src/pages/hello.js
import { ApiService } from '../../providers/api-service'; ・・・ @Component({ selector: 'page-hello', templateUrl: 'hello.html', providers: [ApiService] }) export class SamplePage { constructor(public navCtrl: NavController, private ApiService: ApiService) { } test() { this.ApiService.get('/users/', {}) .then(data => { // success console.log(data); }) .catch(messages => { // error alert(messages); }); } }
以上です。