Angular HttpClient請求JSON和非JSON資料
阿新 • • 發佈:2019-01-07
從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>