HTTP & Communication
HttpClient
API Calls Karna
💡 HttpClient ek dedicated courier service hai — tumhe khud "delivery" karne (raw XMLHttpRequest handle karne) ki zaroorat nahi, bas "kaha bhejna hai, kya bhejna hai" batao, HttpClient poora kaam sambhal leta hai, aur ek Observable "receipt" deता hai.
HttpClient (@angular/common/http) Angular ka BUILT-IN service hai HTTP requests ke liye — GET/POST/PUT/DELETE. HAR method ek OBSERVABLE return karta hai (Promise nahi) — RxJS operators ke saath seamlessly integrate hota hai. provideHttpClient() (ya HttpClientModule) app configuration mein zaroori hai.
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root' })
export class UserService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get<User[]>('https://api.example.com/users');
}
createUser(user: User) {
return this.http.post<User>('https://api.example.com/users', user);
}
updateUser(id: number, user: User) {
return this.http.put<User>('https://api.example.com/users/' + id, user);
}
deleteUser(id: number) {
return this.http.delete('https://api.example.com/users/' + id);
}
}
// Component mein use karna:
// this.userService.getUsers().subscribe(users => this.users = users);🌐
HttpClient ek dedicated courier service hai — tumhe khud "delivery" karne (raw XMLHttpRequest handle karne) ki zaroorat nahi, bas "kaha bhejna hai, kya bhejna hai" batao, HttpClient poora kaam sambhal leta hai, aur ek Observable "receipt" deता hai.
1 / 6
⚡ झट से Recap
- HttpClient = built-in HTTP service, Observable-based
- get/post/put/delete = standard HTTP methods
- Request sirf .subscribe() call hone par actually chalता hai (lazy)
इस page में (2 subtopics)
HttpClient methods GENERIC hain — <User[]>, <User> jaisा type parameter deने se, TypeScript automatically JAANTA hai response ka shape kya hai, autocomplete aur compile-time type checking milती hai.
interface User {
id: number;
name: string;
email: string;
}
// Typed response — TypeScript ab jaanta hai 'users' User[] hai:
this.http.get<User[]>('/api/users').subscribe(users => {
console.log(users[0].name); // autocomplete kaam karega!
});
// Bina type ke (avoid karo):
// this.http.get('/api/users').subscribe(users => {
// // 'users' ka type 'Object' hai — koi autocomplete/safety nahi
// });Tip: Response types define karna (interfaces se) EXTRA typing effort lagता hai shuru mein, LEKIN bade codebases mein runtime errors (jaise "undefined property") COMPILE TIME par hi pakde jaate hain — long-term mein bahut TIME bachaता hai.
HttpClient methods ka LAST parameter ek OPTIONS object leta hai — headers, params (query string), aur baaki configuration ISI mein jaते hain.
import { HttpHeaders, HttpParams } from '@angular/common/http';
const headers = new HttpHeaders().set('X-Custom-Header', 'value');
const params = new HttpParams().set('page', '1').set('limit', '10');
this.http.get('/api/users', { headers, params }).subscribe(...);
// Actual URL: /api/users?page=1&limit=10Tip: HttpHeaders/HttpParams IMMUTABLE hain — .set() ek NAYI instance return karta hai (original modify nahi hota), chained calls (jaise .set().set()) is wajah se possible hain, HAR .set() ek naya object return karta hai.