AdvancedHTTPプラグイン

テスト環境 ( バージョン番号 ) : 3.3.0

このプラグインの詳細は、こちら ( GitHub ) をご確認ください。

このプラグインでは、グローバルオブジェクト「cordova.plugin.http」のAPIを使用し、HTTPサーバーとの通信を行います。

このオブジェクトは、グローバルスコープに属していますが、使用できるのは、deviceready イベントの発火後になります。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(cordova.plugin.http);
}

プラグインID

cordova-plugin-advanced-http

プラグインの追加方法(Monaca上での操作)

1. Monaca クラウド IDE から設定 → Cordova プラグインの管理 を選択します。

2. 利用可能なプラグイン 項目の AdvancedHTTP プラグインにカーソルを置き、有効ボタンをクリックします。

機能

• iOSやAndroidのネイティブ機能を用いてHTTP通信を行います。

• Javascript でfetch API などを用いた場合に比べて以下のような利点があります。

  • CORSエラーの回避

APIの解説

基本的なAPI

以下の基本的なAPIについて解説します。

• sendRequest

• setDataSerializer

• get

• post

sendRequest

cordova.plugin.http.sendRequest(url, options, success, error)

• 指定したurlにHTTPリクエストを送信します。

• optionsに様々なパラメータを設定します。

  • method: HTTPメソッド

  • headers: HTTPヘッダ

  • param: クエリ文字列(主にgetメソッドで使用)

  • data: リクエストボディのデータ。形式はserializerで指定(post,putなどのメソッドで使用)

  • serializer: データ形式の指定。詳細は後述のsetDataSerializer参照

  • その他のパラメータについてはCordova Advanced HTTP plugin参照

• success: 成功時のコールバック

• error: エラー時のコールバック

例

const options = {
  method: "post",
  headers: { "Accept": "application/json" },
  data: { "key1": "123", "key2": "abc" },
  serializer: "json"
};

cordova.plugin.http.sendRequest("https://example.com", options, (response) => {
  // success
  console.log(response.status);
}, (response) => {
  // error
  console.log(response.status);
  console.log(response.error);
});

setDataSerializer

cordova.plugin.http.setDataSerializer(serializer)

• 送信するデータの形式を指定します。

• sendRequest APIの options.serializerで指定するのと同等です。

• POST/PUT/PATCHメソッドに対応しています。

• 指定できる値:

  • "urlencoded"

  • "json"

  • "utf8"

  • "multipart"

  • "raw"

例1: serializer="urlencoded"

cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.sendRequest(url, {
    "method": "post",
    // "serializer": "urlencoded", // optionでの指定も可能
    "data": { "key1": "123", "key2": "abc" }
}, success, error);

• key1=123, key2=abc の値がフォームデータとして送信されます。(Content-Type: application/x-www-form-urlencodedでの送信に相当)

例2: serializer="json"

cordova.plugin.http.setDataSerializer("json");
cordova.plugin.http.sendRequest(url, {
    "method": "post",
    // "serializer": "json", // optionでの指定も可能
    "data": { "key1": "123", "key2": "abc" }
}, success, error);

• リクエストボディにJSONデータを載せて送信します。

その他のデータ形式についてはCordova Advanced HTTP pluginを参照してください。

get

cordova.plugin.http.get(url, param, headers, success, error)

• GETリクエストを送信します。

• sendRequest APIでmethod: "get"を指定した場合と同等の機能です。

• 第２引数にクエリ文字列を指定します。

例

  cordova.plugin.http.get(url,
  {
    // query parameters
    "key1": "123",
    "key2": "abc"
  }, {
    // headers
  }, success, error);

post

cordova.plugin.http.post(url, data, headers, success, error)

• POSTリクエストを送信します。

• sendRequest APIでmethod: "post"を指定した場合と同等の機能です。

• 第２引数にデータを指定します。データの送信形式はsetDataSerializer APIで指定します。

例

cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.post(url,
{
    // data
    "key1": "123",
    "key2": "abc"
}, {
    // headers
}, success, error);

高度な使い方

AdvancedHTTPプラグインにはその他にも様々なAPIが用意されています。

• put / patch / delete / head / options

• uploadFile / downloadFile

• getBasicAuthHeader

• useBasicAuth

• setRequestTimeout

• setConnectTimeout (Android Only)

• setReadTimeout (Android Only)

• setFollowRedirect

• getCookieString

• setCookie

• clearCookies

• setServerTrustMode

• setClientAuthMode

• removeCookies

これらのAPIの詳細についてはCordova Advanced HTTP pluginを参照してください。

サンプル

fetch APIとの比較

例: POSTリクエストを送信する場合

fetch API

const url = "https://example.com/";
const method = "POST";
const body = "key1=123&key2=abc";
const headers = {
    "Accept": "application/json",
    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
};
fetch(url, {
    method,
    headers,
    body
}).then((response) => {
    // convert to json
    return response.json();
}).then((result) => {
    console.log(result);
    alert(JSON.stringify(result));
});

AdvancedHTTP

const url = "https://example.com/";
const data = {
    "key1": "123",
    "key2": "abc"
};
const headers = {
    "Accept": "application/json",
};
cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.post(url, data, headers, (response) => {
    console.log(response);
    alert(JSON.stringify(response));
}, (response) => {
    // error
});

サンプルアプリ

この記事に記載されたサンプルコードを実装したアプリケーションを公開しています。 Monacaにプロジェクトをインポートしてご利用ください。

サンプルアプリのインポート