Angular：HttpClient 这个示例（同步版、异步版）

引言

自分の勉強メモ、ご参考まで

Angular的HttpClient（AJAX）示例（异步版）

在app.module.ts中导入HttpClientModule。

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  ......
  imports: [
    HttpClientModule
  ]
  bootstrap: [AppComponent]
  ......
})

使用HttpClient

import { HttpClient, HttpHeaders } from '@angular/common/http';

constructor(private http: HttpClient) { }

onSearch () {
  let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json'  }) };

  console.log('1) ajax start...');
  this.http.get('http://localhost/Mock/receiptMap.json', httpOptions)
    .subscribe(response => {
      console.log(response);
      console.log('2) ajax over...');
    });    
  console.log('3) search over...');
}

// 結果は以下である
1) ajax start...
3) search over...
2) ajax over...

Angular的HttpClient(AJAX)示例（同步版本）。

使用HttpClient

import { lastValueFrom } from 'rxjs';

async onSearch () {
  let httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };

  console.log('1) ajax start...');
  const f = await lastValueFrom(this.http.get('http://localhost/AiReceiptApiMock/receiptMap.json', httpOptions));
  console.log(f);
  console.log('2) ajax over...');
  console.log('3) search over...');
}

// 結果は以下である
1) ajax start...
2) ajax over...
3) search over...