AdvancedHTTPプラグイン
テスト環境 ( バージョン番号 ) : 3.3.0
このプラグインでは、グローバルオブジェクト「cordova.plugin.http
」のAPIを使用し、HTTPサーバーとの通信を行います。
このオブジェクトは、グローバルスコープに属していますが、使用できるのは、deviceready
イベントの発火後になります。
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(cordova.plugin.http);
}
プラグインID
cordova-plugin-advanced-http
プラグインの追加方法(Monaca上での操作)
Monaca クラウド IDE から
設定 → Cordova プラグインの管理
を選択します。利用可能なプラグイン 項目の
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"
を指定した場合と同等の機能です。第2引数にクエリ文字列を指定します。
例
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"
を指定した場合と同等の機能です。第2引数にデータを指定します。データの送信形式は
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にプロジェクトをインポートしてご利用ください。
最終更新
役に立ちましたか?