How to make Http request and handle errors in Ionic Framework

In most of the cases in our mobile application we’ve to fetch data from a server. If you are using Ionic Framework, it’s not a big deal. Http plugin made it easy for us. Let’s see how to make http request in Ionic Framework using Http plugin to get data from server.

  1. Install the plugin: Run the following command in command line in your project:

    Add this module in providers array of your app.module.ts file:

Import the Http plugin:

Suppose we are going to use this plugin in HomePage.ts file. First we have to import the plugin and add it in constructor as argument:

GET request:

It is comparatively easy to make a GET request. So let’s do it first.  Just write the following code in the method of your home page:

Here you have to change the example url to your server’s url. After receiving the data from server, you can get it in server_data variable.

POST Request:

Everything is same as GET request. Here you have to add header values and post parameters before performing the request. In most of the cases, header values are same as above. Just change postParams as per your data.

Error Handling:

I was working on an ionic project for a while that sends request to server to fetch data. I faced a problem while working on it. If there is no internet connection my busy dialog keeps loading and no error message occurs. Because, the Http GET or POST methods didn’t have any handler to control the errors. After searching for a while I didn’t find any solution on internet. Finally I found it myself. Let me share it with you.

Here I’ve added error handler in subscribe section. Whenever a problem occurs, you can get the error message inside error section.

Important commands of Ionic Framework

If you have decided to learn and work with Ionic Framework, then it’s good to have important commands of it.

So we have listed those handy commands here.

Installing ionic:

Start a new project:

You can use any template name listed below as template_name :

Add android platform:

Add iOS platform:

Create a new page:

Note: Remember to add page-name in declarations and entryComponents arrays in app.module.ts file

Create a new provider:

Run in browser:

Run on android device:

Run on iOS device:

Add a cordova plugin:

Note: Here we’ve used cordova-plugin-camera as example plugin. You can use any other plugin name. Remember to add plugin-name in providers array in app.module.ts file

Remove a cordova plugin:

 

Advantages and disadvantages of Ionic Framework

I’m a fan of native app development. I’ve been developing both Android and iOS app for more than 5 years and still continuing.

However,  I always search for new technologies. If I get anything better, I try to adopt that.

From my this habit, I’ve found angularJS. It’s a very powerful javascript framework that is used in frontend development.

After finding this framework, a question came out of my head. Can we use it in our mobile app development.  While searching for the answer of it I found this ionic framework.

Ionic framework is a multi-platform app development framework powered by cordova. After playing with it for a while the following advantages and disadvantages are found:

Pros or advantages of Ionic Framework:

1. Easy to learn: If you have familiarity with html, css and javascript you can learn it very fast

2. Easy documentation: Ionic has very good and well documentation. Most of the things are covered in their official site. So you don’t have to move around different sites to learn.

3. Rapid development: By running some command line commands, you can create pages (e.g. ionic g page your_page_name), providers etc. When you run a command it generates all files with template codes.  So you don’t have to write everything from scratch.

4. Ionic apps run on different platforms. e.g. Android, iOS, windows etc. As a result you don’t have to write codes for each platform. It reduces development time a lot.

Cons or disadvantages of Ionic Framework:

1. Performance: Native mobile application’s performance is better than ionic app. However, in most of the cases, performance gap is not noticeable.

2. Security: If you are developing financial app e.g. app for bank, ionic framework is not recommended. It may not provide as much security as native application.

3. Limited native functionality: There may be some native functions that may be not available in ionic framework.  In that case you have to develop the plugin yourself. However, there are many plugins available to cover native functionalities.