Figure 1. Some keep promises, some reject them :)
Angular HttpClient got recently released in Angular 4 (later versions) and then formalized in Angular 5. Going forward, Angular recommends usage of HttpClient for communicating with backend services over the HTTP protocol.
Before getting started, on a lighter note, check out this comic strip on Promise. :). In Javascript, Promises are either resolved or rejected. In other words, Promise always transition from state of pending to resolution or reject.
Figure 1. Some keep promises, some reject them 🙂
In this post, you will learn some of the following:
The code given below represents usage of Promise with Angular HttpClient service. This is a prescription service (RxService) which retrieves all the prescriptions for a doctor.
import {Http, Headers, RequestOptions} from '@angular/http'; import {Injectable} from '@angular/core'; import {Rx} from './rx'; import {Observable} from 'rxjs/Observable'; import {Cookie} from 'ng2-cookies'; import {HttpClient, HttpHeaders, HttpResponse} from "@angular/common/http"; @Injectable() export class RxService { private rxUrl = 'http://localhost:8080/rx'; constructor(private httpClient: HttpClient) { } getRx(): Promise<Rx[]> { return this.httpClient.get(this.rxUrl, {observe: 'response', headers: new HttpHeaders().set('Authorization', 'Bearer ' + Cookie.get('access_token'))}) .toPromise() .then(this.extractData) .catch(err => { return Promise.reject(err.error || 'Server error'); }); } extractData(res: HttpResponse<Object>) { var array = new Array(); var key, count = 0; for(key in res.body) { array.push(res.body[count++]); } return array; } }
Note some of the following in above code example:
The code given below represents RxListComponent which displays a list of prescription retrieved using RxService shown above. Note the usage of then method to process the returned Promise object.
import {RxService} from './rx.service'; import {Rx} from './rx'; import {Component, OnInit} from '@angular/core'; import {Router} from '@angular/router'; @Component({ templateUrl: './rx-list.component.html' }) export class RxListComponent implements OnInit { rxlist: Rx[]; errorMessage: string; constructor(private rxService: RxService, private router: Router) { this.errorMessage = ''; } ngOnInit(): void { this.getRx(); } getRx() { this.rxService.getRx() .then(rxlist => { this.rxlist = rxlist; if (this.rxlist.length === 0) { this.errorMessage = 'There are no prescriptions you have created so far!'; } }, error => { this.router.navigateByUrl('/auth/login'); console.error('An error occurred in retrieving rx list, navigating to login: ', error); }); } }
In this post, you learned about some of the following:
Did you find this article useful? Do you have any questions about this article or understanding the usage of Promise with Angular HttpClient service (Get API)? Leave a comment and ask your questions and I shall do my best to address your queries.
Last updated: 25th Jan, 2025 Have you ever wondered how to seamlessly integrate the vast…
Hey there! As I venture into building agentic MEAN apps with LangChain.js, I wanted to…
Software-as-a-Service (SaaS) providers have long relied on traditional chatbot solutions like AWS Lex and Google…
Retrieval-Augmented Generation (RAG) is an innovative generative AI method that combines retrieval-based search with large…
The combination of Retrieval-Augmented Generation (RAG) and powerful language models enables the development of sophisticated…
Have you ever wondered how to use OpenAI APIs to create custom chatbots? With advancements…