Ionic 4 | Native HTTP Plugin Tutorial with Example

In this tutorial, we will learn how to make HTTP calls using Ionic’s Native HTTP plugin.

Making Native server calls over provides advantages over traditional JavaScript HTTP calls. Native HTTP calls are made in Android and IOS based native applications. It provides more security and better calls handling features.

Some of its advantages are as follows:

Background threading: All requests are done in background thread like native applications.

Handling of HTTP code 401: This error code 401 is returned during an unauthorized access to the server which is not handled properly using JavaScript-based HTTP calls.

SSL Pinning: Pinning is used to improve the security of a service. It is used to create a secure Identity for making communications.

Here we will create a new Ionic application with a blank template by running the following command:

 

Install Native HTTP Plugin

 

Import in App Module

To use HTTP methods in application, open app.module.ts file to import HTTP class then add in providers array as shown below:

 

To use HTTP Native plugin in component, first import HTTP class then add in the constructor to use its methods:

HTTP class of this native plugin provides some Synchronous and Asynchronous methods:

Asynchronous Functions

This category of functions include sendRequest methods like post, get, put, patch, delete, head, uploadFile and downloadFile.

They are used with the first two parameters taking URL and options object with the last two as success and error callbacks.

Check this common format for making sendRequest HTTP calls:

Success Callback

then() method returns an object with 4 properties:

status is the HTTP response code as numeric value.
data is the response from the server as a string.
url is the final URL obtained after any redirects as a string.
headers is an object with the headers.

 

Failure Callback

catch() method returns an object with 4 properties:

status is the HTTP response code as a numeric value.
error is the error response from the server as a string.
url is the final URL obtained after any redirects as a string.
headers is an object with the headers.

 

We can also use specific request types:

Request types, POST, GET, PUT, PATCH, DELETE and HEAD take up 3 parameter objects:

url: The url to send the request to
parameters: Parameters to send with the request
headers: The headers to set for this request

For example here is a POST method for consuming JSON data response from API endpoint:

uploadFile

For saving files on the server, we use the uploadFile method which takes 4 parameters:

url: The url to send the request to
body: The body of the request
headers: The headers to set for this request
filePath: The local path of the file to upload
name: The name of the parameter to pass the file along as

downloadFile

For downloading a file from the server, there is downloadFile method which takes 4 parameters:

url: The url to send the request to
body: The body of the request
headers: The headers to set for this request
filePath: The path to download the file to, including the file name.

Ionic’s Native HTTP plugin also provides Synchronous Functions for getting Authentication headers, setting or getting Cookies and setting Headers. You can check them here for more details.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of