HttpClient là một class trong Angular cung cấp cho chúng ta các method để thực hiện các yêu cầu HTTP đến các API server. Đây là một trong những class quan trọng nhất trong Angular để tương tác với backend. Dưới đây là một số cách sử dụng HttpClient trong Angular:
1. Import HttpClient module
Trước khi sử dụng HttpClient, chúng ta cần import module HttpClientModule vào trong AppModule.
import { HttpClientModule } from '@angular/common/http'; @NgModule({ imports: [ HttpClientModule ]
})
2. Thực hiện GET request
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs'; @Injectable()
export class MyService { constructor(private http: HttpClient) {} getData(): Observable<any> { return this.http.get('https://jsonplaceholder.typicode.com/posts'); }
}
Ở đây, chúng ta import HttpClient vào trong service và sử dụng method get để thực hiện GET request. get trả về một Observable, nó sẽ phát ra kết quả khi có response từ server.
3. Thực hiện POST request
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs'; @Injectable()
export class MyService { constructor(private http: HttpClient) {} postData(data): Observable<any> { const headers = new HttpHeaders() .set('Content-Type', 'application/json'); return this.http.post('https://jsonplaceholder.typicode.com/posts', data, { headers }); }
}
Ở đây, chúng ta sử dụng method post để thực hiện POST request. post nhận ba tham số: URL, dữ liệu cần gửi và options (nếu có). Trong ví dụ trên, chúng ta cũng tạo ra một header để định dạng dữ liệu là JSON.
4. Xử lý lỗi
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs'; @Injectable()
export class MyService { constructor(private http: HttpClient) {} getData(): Observable<any> { return this.http.get('https://jsonplaceholder.typicode.com/posts') .pipe( catchError(this.handleError) ); } private handleError(error: HttpErrorResponse) { let errorMessage = 'Something went wrong'; if (error.error instanceof ErrorEvent) { // client-side error errorMessage = `Error: ${error.error.message}`; } else { // server-side error errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`; } console.log(errorMessage); return throwError(errorMessage); }
}
Trong ví dụ trên, chúng ta sử dụng catchError để xử lý lỗi. Nếu có lỗi, handleError sẽ được gọi và trả về một Observable với kết quả là lỗi. Chúng ta có thể định nghĩa cách xử lý lỗi trong handleError và trả về kết quả mà chúng ta mong muốn
5. Thực hiện PUT request
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs'; @Injectable()
export class MyService { constructor(private http: HttpClient) {} putData(data): Observable<any> { const headers = new HttpHeaders() .set('Content-Type', 'application/json'); return this.http.put('https://jsonplaceholder.typicode.com/posts/1', data, { headers }); }
}
Ở đây, chúng ta sử dụng method put để thực hiện PUT request. put nhận ba tham số: URL, dữ liệu cần gửi và options (nếu có). Trong ví dụ trên, chúng ta cũng tạo ra một header để định dạng dữ liệu là JSON.
6. Thực hiện DELETE request
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs'; @Injectable()
export class MyService { constructor(private http: HttpClient) {} deleteData(): Observable<any> { return this.http.delete('https://jsonplaceholder.typicode.com/posts/1'); }
}
Ở đây, chúng ta sử dụng method delete để thực hiện DELETE request.
7. Sử dụng query parameters
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs'; @Injectable()
export class MyService { constructor(private http: HttpClient) {} getDataById(id: number): Observable<any> { const params = new HttpParams() .set('id', id.toString()); return this.http.get('https://jsonplaceholder.typicode.com/posts', { params }); }
}
Ở đây, chúng ta sử dụng HttpParams để tạo query parameters và truyền chúng vào GET request.
Trên đây là một số cách sử dụng HttpClient trong Angular. Các method khác của HttpClient cũng tương tự như các ví dụ trên. Bạn có thể tham khảo thêm trong Angular Documentation.