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 Obserable 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 Obserable cho mình.

Obserable quản lý các đối tượng subscribes, khi có một sự thay đổi thì Obserable 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ừ khoá quan trọng là Obserable , 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 Obserable

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 qủa là đối tượng Obserable

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 Obserable. Như ta nói ở phía trên Obserable quản lý các đối tượng subscribes, khi có một sự thay đổi thì Obserable 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ừ Obserable

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

Sau khi nhận được kết quả từ Obserable 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>

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments