Member-only story
Modeling Typescript Interfaces to Support Angular HTTP requests
How to model data response in AJAX
Angular single-page applications use massive Ajax requests to communicate with webservers and retrieve data from databases. In this article, I’ll give a couple of hints about how to manage data response. This will help you set up a good designed layer for your Ajax flows.
The Basics: Observables and HttpClient
From Angular 4 to Angular 8, the framework started to make a massive use of Observables and Promises to handle data fetching from AJAX. Some versions of Angular seemed to prefer Promises, some others Observables, but the goal is basically always the same. We have a Service method, invoked from our Angular Component, and we want to be notified when data from the server pops out.
Promises and Observables are quite different. Keep in mind that Promises are simple objects with fullfilled and rejected possible states, and Observables are “streams” over the requests. Observables are way more versatile if you need to have control of those requests. I won’t spend more time on Promises, but be sure to choose between Observables and Promises very carefully. We’ll focus the discussion on the Observables implementation. We’re focusing on Observables because Observables are presented as the default implementation in the current official Angular documentation for devs.
HTTP JSON Responses: Unstructured Version
When your goal is to fire an Ajax request from an Angular service, you start coding something like this:
The getCandies() method here is very plain and unstructured. We’re using type inference to return to the caller a generic Observable because it’s the return type of the get() method in HttpClient. So, what’s the type handled by…
