Sử dụng Http Client trong Angular

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người về Http Client là như thế nào?

1. Http Client là gì

Chúng ta sử dụng Http Client để gọi các service bên ngoài. Ví dụ như ứng dụng angular gọi các webservice của Spring. Hoặc chúng ta sử dụng các webservice của bên thứ 3. Chúng ta sử dụng thư viện HTTP Client để gọi các webservice này.

Để sử dụng được HTTP Client ta làm các bước sau:

Bước 1. Khai báo HttpClientModule trong app.module

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Bước 2 : Inject HttpClient vào Service nơi sẽ gọi các webservice bên ngoài thông qua constructor

1
2
constructor(public http: HttpClient) {
}

Bước 3 : Thực hiện các phương thức gọi ra bên ngoài. Chúng ta có thể gọi phương thức protocol là get, push, delete , update. Thông qua phương thức HttpClient.get

1
2
3
4
5
6
7
8
9
public getData() {
  this.HttpClient.get<any[]>(this.baseUrl+'users/'+this.userName+'/repos')
           .subscribe(data => {
               this.repos= data;
           },
           error => {
           }
  );
}

2. Sử dụng Observable

Chúng ta sử dụng Observable trong Angular để quản lý các dữ liệu bất đồng bộ. Anh ví dụ như mình gọi một webservice ở bên ngoài, sau khi kết thúc thì nó trả về đối tượng Observable cho mình.

Observable quản lý các đối tượng subscribes, khi có một sự thay đổi thì Observable sẽ thông báo đến các subscribers của mình.

Trong Angular chúng ta sử dụng Obserable từ thư viện RxJS. Thư viện này cung cấp cho chúng ta một số phương thức như map , filter, take, merge kết quả của webservice gọi về.

Anh sẽ có ví dụ sau, chức năng của anh sẽ hiển thị thông tin của company ra cho người dùng. Từ Angular anh sẽ gọi ra một webservice bên ngoài. Sau khi nhận được kết quả anh sẽ hiển thị lên cho người dùng. 3 từ khóa quan trọng là Observable , Subscribe và RxJS sẽ được sử dụng trong ví dụ này.

Bước 1 : Anh sẽ sử dụng HTTP Client để gọi ra webservice bên ngoài. Anh sẽ có file InfoCompanyService sau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Company } from '../../models/company';

@Injectable()
export class InfoCompanyService {

  constructor(  private http: HttpClient,) {
  }
  getInfoCompany(slug): Observable<Company> {
    return this.http.get('http://localhost:8080/companies/1')
    .pipe(
      map((response: any) => response),
    )
  }
  
}

Đầu tiên chúng ta import thư viện Observable

1
import { Observable } from 'rxjs';

Tiếp đến chúng ta gọi webservice bên ngoài tại phương thức getInfoCompany. Phương thức này sau khi gọi xong sẽ trả về kết quả là đối tượng Observable.

1
2
3
4
5
6
 getInfoCompany(slug): Observable<Company> {
    return this.http.get('http://localhost:8080/companies/1')
    .pipe(
      map((response: any) => response),
    )
  }

Chúng ta gọi webservice bên ngoài bằng câu lệnh.

1
this.http.get('http://localhost:8080/companies/')

Chúng ta sử dụng hàm pipe (giống như Promise) để nhận biết khi nào dữ liệu bị thay đổi, trong trường hợp này chúng ta gọi webservice nó sẽ trả cho ta dữ liệu như vậy các đoạn code trong hàm pipe thực thi khi ta gọi xong webservice, có nghĩa là webservice trả về kết quả lúc đó ta mới chạy tiếp hàm map.

Trong hàm map chúng ta chỉ format lại dữ liệu và trả về kết quả của webservice trả về.

Bước 2 : Gọi Service từ component

Chúng ta sẽ viết component tên là Company. Trong Component này chúng ta sẽ nhúng CompanyService vào và gọi hàm getInfoCompany.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Component, OnInit } from '@angular/core';
import { InfoCompanyService } from '../../../core/services/company/InfoCompany.service'
import { Company } from '../../../core/models/company';
@Component({
  selector: 'companies',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.scss']
})
export class ListCompanyComponent implements OnInit {

  company:Company;

  constructor(
    private infoCompanyService : InfoCompanyService
  ) {
  }

  ngOnInit() {
    this.getIdcompany();
  }
  getInfoCompany (){
    this.infoCompanyService.getInfoAllCompany().subscribe(company => this.company = company);
    
  } 
}

Chúng ta nhúng InfoCompanyService vào component và gọi hàm getInfoAllCompany. Lúc này InfoCompanyService sẽ gọi ra ngoài và lấy kết quả về là một Observable. Như ta nói ở phía trên Observable quản lý các đối tượng subscribes, khi có một sự thay đổi thì Observable sẽ thông báo đến các subscribers của mình. Chính vì vậy mà chúng ta phải có phương thức subscribe để nhận kết quả trả về từ Observable.

1
this.infoCompanyService.getInfoAllCompany().subscribe(companies => this.companies = companies);

Sau khi nhận được kết quả từ Observable chúng ta gán biến local this.companies = companies sau đó ta truyền biến này qua cho template html.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container-fluid company-container header_area">
    <div class="title-box">
        <h2 class="title-center">company.mainTitleListCompany</h2>
        <p class="description text-center">company.smallTitleListCompany</p>
    </div>
    <div class="row">
        <div class="items-grid">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngFor="let company of companies">
                <company-item [company]="company"></company-item>
            </div>
        </div>
    </div>
</div>

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments