Basics of Retrieving Data

From working with social media APIs and remote database-driven records to handling content stored in external JSON files, most modern apps rely, to some degree, on imported data.

Without this data to drive the content for such apps, even the most polished UI isn’t going to count for much.

Thankfully, as Ionic is built on top of the Angular framework, we can use the built-in HttpClient service to simplify the process of loading, retrieving, and parsing external data for our apps.

Before we do this, though, we need to familiarize ourselves with the following:

• Promises
• Observables
• Maps
• Filters

Promises

A Promise is used to handle asynchronous operations (scripts that do not wait for a certain piece of code to finish executing before moving onto the next line), such as retrieving remote server data or completing an SQLite transaction by providing an object that represents the value of that operation.

This value may be available immediately, at some point in the near future, or never returned at all, but the Promise object acts as a kind of agreement that, whatever the outcome, it will handle the operation while the rest of the script continues executing without interruption.

If you’ve worked with JavaScript for a while, using callbacks to handle asynchronous operations, (for example, when processing an SQLite database transaction) should be familiar.

As useful as callbacks are, Promises provide a more finely tuned mechanism for handling asynchronous requests, especially the success or failure of the operation.

In our Ionic apps, we can use the then method of the Promise object to handle how the returned value is processed. Let’s say, for example, that we have a method that retrieves data from a remote server. The Promise object might handle the success or failure of the asynchronous request in the following way: