Http

The HTTP module provides a functionality, which allows submitting GET and POST requests for both platforms (iOS and Android). With its methods, we could request a data from a remote server and to represent the received response in different formats. We could request or send data with the following ways:

getString
getJSON
getImage
getFile
request

Usage

HTTP Get

The example demonstrates different ways, how we could receive content from a server while making HTTP GET request.

The getString method allows us to make a request and to get the response body as a string value.

JavaScript
TypeScript

httpModule.getString("https://httpbin.org/get").then((r) => {
    viewModel.set("getStringResult", r);
}, (e) => {
});

getString("https://httpbin.org/get").then((r: string) => {
    viewModel.set("getStringResult", r);
}, (e) => {
});

The getJSON give us a simple way to get the response body as JSON object and to access the data while using all benefits of the JSON.

getImage allow us to get an image from a specific URL. The returned object will be ImageSource and it could be used for direct displaying the source into Image view.

JavaScript
TypeScript

httpModule.getImage("https://httpbin.org/image/jpeg").then((r) => {
    // getImage method returns ImageSource object
}, (e) => {
});

getImage("https://httpbin.org/image/jpeg").then((r: ImageSource) => {
    // getImage method returns ImageSource object
}, (e) => {
});

With request method we can make a request and check the response status code by accessing statusCode property.

JavaScript
TypeScript

httpModule.request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response) => {
    // Argument (response) is HttpResponse
}, (e) => {
});

request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response: HttpResponse) => {
    // Argument (response) is HttpResponse
}, (e) => {
});

The example demonstrates, how to get the request-response header and how to access the available data in it.

JavaScript
TypeScript

httpModule.request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response) => {
    // Argument (response) is HttpResponse
}, (e) => {
});

request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response: HttpResponse) => {
    // Argument (response) is HttpResponse
}, (e) => {
});

The example demonstrates, how to get the request-response content and how to represent the received data as a String value or JSON object. We could also use toImage method when we download an image.

JavaScript
TypeScript

httpModule.request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response) => {
    // Content property of the response is HttpContent
    // The toString method allows you to get the response body as string.
    const str = response.content.toString();
    // The toJSON method allows you to parse the received content to JSON object
    // var obj = response.content.toJSON();
    // The toImage method allows you to get the response body as ImageSource.
    // var img = response.content.toImage();
}, (e) => {
});

request({
    url: "https://httpbin.org/get",
    method: "GET"
}).then((response: HttpResponse) => {
    // Content property of the response is HttpContent
    // The toString method allows you to get the response body as string.
    const str = response.content.toString();
    // The toJSON method allows you to parse the received content to JSON object
    // var obj = response.content.toJSON();
    // The toImage method allows you to get the response body as ImageSource.
    // var img = response.content.toImage();
}, (e) => {
});

The example demonstrates how to download a file while using getFile method.

JavaScript
TypeScript

httpModule.getFile("https://raw.githubusercontent.com/NativeScript/NativeScript/master/tests/app/logo.png").then((resultFile) => {
    // The returned result will be File object
}, (e) => {
});

getFile("https://raw.githubusercontent.com/NativeScript/NativeScript/master/tests/app/logo.png").then((resultFile) => {
    // The returned result will be File object
}, (e) => {
});

Note: By default the file will be saved in Documents folder.

In the getFile method we could also specify the path, where the file to be saved. This scenario is demonstrated in the example below, where the image file will be kept in the current application folder.

JavaScript
TypeScript

const filePath = fileSystemModule.path.join(fileSystemModule.knownFolders.currentApp().path, "test.png");
httpModule.getFile("https://httpbin.org/image/png?testQuery=query&anotherParam=param", filePath).then((resultFile) => {
    // The returned result will be File object
}, (e) => {
});

const filePath: string = path.join(knownFolders.currentApp().path, "test.png");
getFile("https://httpbin.org/image/png?testQuery=query&anotherParam=param", filePath).then((resultFile: File) => {
    // The returned result will be File object
}, (e) => {
});

HTTP Post

The example demonstrates, how to make HTTP POST request and how to get request response.

JavaScript
TypeScript
JavaScript
TypeScript

const httpModule = require("tns-core-modules/http");

import { request, getFile, getImage, getJSON, getString } from "tns-core-modules/http";

httpModule.request({
    url: "https://httpbin.org/post",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify({
        username: vm.get("user"),
        password: vm.get("pass")
    })
}).then((response) => {
    const result = response.content.toJSON();
}, (e) => {
});

request({
    url: "https://httpbin.org/post",
    method: "POST",
    headers: { "Content-Type": "application/json" },
    content: JSON.stringify({
        username: vm.get("user"),
        password: vm.get("pass")
    })
}).then((response) => {
    const result = response.content.toJSON();
}, (e) => {
});

Improve this document

Demo Source

Methods

Name	Type	Description
`getFile(url: string, destinationFilePath?: string): Promise<File>`	`Promise<File>`	Downloads the content from the specified URL and attempts to save it as file.
`getImage(url: string): Promise<ImageSource>`	`Promise<ImageSource>`	Downloads the content from the specified URL and attempts to decode it as an image.
`getJSON<T>(url: string): Promise<T>`	`Promise<T>`	Downloads the content from the specified URL as a string and returns its JSON.parse representation.
`getString(url: string): Promise<string>`	`Promise<string>`	Downloads the content from the specified URL as a string.
`request(options: HttpRequestOptions): Promise<HttpResponse>`	`Promise<HttpResponse>`	Makes a generic http request using the provided options and returns a HttpResponse Object.

API References

Name	Type
tns-core-modules/http	`Module`

NativeScript Core