1. 程式人生 > >Angular HttpClient請求JSON和非JSON資料

Angular HttpClient請求JSON和非JSON資料

從Angular 4開始,Angular的http請求改用HttpClient。

新增HttpClientModule

首先需要引入HttpClientModule,它需要放在BrowserModule後:

import { NgModule }         from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
],
declarations: [
AppComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule {}

請求JSON資料

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ConfigService {
constructor(private http: HttpClient) { }
getData() {
return this.http.get(this.dataUrl);
}
}

HttpClient其中一個特性是預設返回的資料為json資料。,使用它返回的資料如下:

http.get(url).subscribe(...)

對於angular 4之前,則需要做json轉換:

http.get(url).map(res => res.json()).subscribe(...)

請求非JSON資料

如果需要返回非JSON資料,則需要在請求時設定responseType頭資訊為text:

getTextFile(filename: string) {
return this.http.get(filename, {responseType: 'text'})
.pipe(
tap(
data => this.log(filename, data),
error => this.logError(filename, error)
)
);
}

http.get()返回的是一個Observable<String>