Angular HttpClient 簡單入門

現代瀏覽器支持使用兩種不一樣的 API 發起 HTTP 請求：XMLHttpRequest 接口和 fetch() API。
@angular/common/http 中的 HttpClient 類爲 Angular 應用程序提供了一個簡化的 API 來實現 HTTP 客戶端功能。

1、準備工做

首先在app.module.ts 導入 HttpClientModule。以下：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    HttpClientModule,
  ]
})
export class AppModule {}

2、在須要引用HttpClient的service.ts中引入HttpClient，以下：

import { HttpClient } from '@angular/common/http';
export class ConfigService {
  constructor(private http: HttpClient) { }
}

3、請求數據

return this.http.get/post(url:'請求地址' ,
   options: {
      headers: this.headers
    })
      .toPromise()
      .then((data: any) => {
        return data;
      })
      .catch((err) => {
        console.log(err);
      });
  }

4、在對應的component.ts文件中引入service

數據格式：

{
    "lists":[
        {"title":"","pic":""},
        {"title":"","pic":""}
    ]
}

5、頁面上調用

配置服務端接口也一樣。

1、在開發環境配上對應接口請求地址

2、新建name.serviec.ts文件

而後引入：

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

3、接口請求方法及服務配置

4、.html和component.ts使用