Advanced HTTP Plugin

Tested Version: 3.3.0

This document is based on the original document (GitHub) .

This plugin defines a global cordova.plugin.http object, which communicates with HTTP servers. Although the object is in the global scope, it is not available until after the deviceready event.

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

Plugin ID

cordova-plugin-advanced-http

Adding the Plugin in Monaca

In order to use this plugin, please enable AdvancedHTTP plugin in Monaca Cloud IDE.

Features

• Communicate with HTTP servers by using native processes of iOS or Android.

• There is the following advantage compared to using fetch API in Javascript.

  • CORS restrictions do not apply

API Reference

Basic API

This chapter describes the following basic APIs

• sendRequest

• setDataSerializer

• get

• post

sendRequest

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

• Send HTTP request to specified url.

• The optionscontains following keys.

  • method: HTTP method

  • headers: HTTP headers

  • param: query strings(mainly applicable on get)

  • data: payload data. The format can be defined by serializer.(applicable on post, put, etc.)

  • serializer: data format. Refer setDataSerializer section about the details.

  • For other keys, see Cordova Advanced HTTP plugin.

• success: callback function for success request.

• error: callback function for failure request.

Example:

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)

• Set the data format.

• Equivalent to specifying in the sendRequest API's options.serializer.

• Only applicable on POST/PUT/PATCH requests.

• Possible values:

  • "urlencoded"

  • "json"

  • "utf8"

  • "multipart"

  • "raw"

Example.1: serializer="urlencoded"

cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.sendRequest(url, {
    "method": "post",
    // "serializer": "urlencoded", // Can also be specified with option
    "data": { "key1": "123", "key2": "abc" }
}, success, error);

• The values key1=123, key2=abc are sent as form data.(Equivalent to sending request with Content-Type: application/x-www-form-urlencoded)

Example.2: serializer="json"

cordova.plugin.http.setDataSerializer("json");
cordova.plugin.http.sendRequest(url, {
    "method": "post",
    // "serializer": "json", // Can also be specified with option
    "data": { "key1": "123", "key2": "abc" }
}, success, error);

• Send JSON data on payload.

See Cordova Advanced HTTP plugin for more information on other parameters.

get

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

• Send GET request.

• Equivalent to specifying in the sendRequest API's options.method = "get".

• Set query strings as the second argument.

Excample:

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

post

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

• Send POST request.

• Equivalent to specifying in the sendRequest API's options.method = "post".

• Set payload data as the second argument. The format can be specified by setDataSerializer API.

Example:

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

Advanced usage

AdvancedHTTP plugin also provides various APIs.

• put / patch / delete / head / options

• uploadFile / downloadFile

• getBasicAuthHeader

• useBasicAuth

• setRequestTimeout

• setConnectTimeout (Android Only)

• setReadTimeout (Android Only)

• setFollowRedirect

• getCookieString

• setCookie

• clearCookies

• setServerTrustMode

• setClientAuthMode

• removeCookies

See Cordova Advanced HTTP plugin for more information on these APIs.

Samples

Comparison with fetch API

Example: Send POST request

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
});

Sample application

We created sample application using the AdvanceHTTP plugin. Please click the following link to import the application to Monaca.

Import sample app.