ionic2でHTTPを実装する

ionicプロジェクトで、サーバに対してHTTP通信は必須かと思います。ionicプロジェクトではデフォルトでhttpモジュールがインストールされています。
それを利用する方法を記述しておきます。

実際には、app.module.tsにHttpModuleを記述するだけです。実際には、下記の通りimportsに記述を追加します。

app.module.ts


import { HttpModule } from'@angular/http';
・・・
  imports: [
        HttpModule,
         ・・・

これだけで利用でします。

実際の実装は、下記の通りです。リクエストを出すには、http.get()とhttp.post()を利用します。返り値は、Promiseです。


import { Http, RequestOptions, Request, RequestMethod, Headers } from'@angular/http';
・・・
constructor(public http: Http) {}
・・・
//  配列からパラメータを返す
getParame( paramsArray, initString ) {
    let resurl = "";
    for ( let key in paramsArray ) {
      resurl += (resurl) ? '&':initString;
      resurl += key + '=' + paramsArray[key];
    }
    return resurl;
}
httpGet(path, data) : Observable{
    //URLの生成
    let strUrl = this.serverUrl + path + this.getParame(data, '?');
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    let options = new RequestOptions({ headers: headers });
    //Getリクエストを送信する
    return this.http.get(strUrl, options)
      .map(res=>{
        let data = res.json();
        console.log("data:", data)
        return data;
      });
}
httpPost(path, data) : Observable{
    //URLの生成
    let strUrl = this.serverUrl + path;
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    let options = new RequestOptions({ headers: headers });
    let body = this.getParame(data, '');
    //Getリクエストを送信する
    return this.http.post(strUrl, body, options)
      .map(res=>{
        let data = res.json();
        console.log("data:", data)
        return data;
      });
}

※サーバ側で、Access-Control-Allow-Originヘッダを返さないとエラーとなるので、サーバ側で送信する様に設定する。

PHPのサンプル

header("Access-Control-Allow-Origin: ".$_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");

以上で実装完了です。

ブログ

カテゴリ