Angular: Understanding ways to request API & handle the response.

In this post, we will explore the interfaces that can be used to request data from backend services and ways of handling the response in Angular (using version: “@angular/core”: “~7.0.0”).

Modern browsers support two interfaces for requesting data:

• XMLHttpRequest (HttpClient Implementation in Angular)
• fetch API

Let us explore the practical approach to use them in the angular application and ways to handle the response.

For demo purpose, I created an Avenger themed angular application. As I am early waiting for the end-game release within a span of a few days.

For mocking backend API calls, I am using Angular in-memory-web-api. It only intercepts Angular `Http` and `HttpClient`. So, won’t be able to directly hit the endpoint with curl request or using tool postman. Configuration part is easier.

npm i angular-in-memory-web-api -D

Import as a module in your app modules with your mocked in-memory service as input.

HttpClientInMemoryWebApiModule.forRoot(InMemoryAvengerService)

angular-avengers - StackBlitz