Monaca Docs
質問…
⌃K
Comment on page

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. 1.
    Monaca クラウド IDE から設定 → Cordova プラグインの管理 を選択します。
  2. 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にプロジェクトをインポートしてご利用ください。
前
サードパーティー製プラグイン
次
PhoneGap BarcodeScanner
最終更新 11mo ago