Angular 4從API響應中獲取標頭

Question

我正在向API發送請求，它返回一個數據數組，但我不知道如何從該URL中提取標題，這就是我在服務中嘗試過的

@Injectable()
export class ResourcesService {
private resourcesurl = "http://localhost:9111/v1/resources";

constructor(private http: Http) { }

getResources() {
  let headers = new Headers();
  headers.append("api_key", "123456");
  return this.http.get(this.resourcesurl, { headers: headers 
 }).map(this.extractData).catch(this.handleError);
}
getresourceheaders(){
  let headers = new Headers();
  headers.append("api_key", "123456");
  let options = new RequestOptions();
  let testsss = options.headers
  let headerapi = this.http.request(this.resourcesurl, options);
  let test = this.http.get(this.resourcesurl, { headers: headers });
  console.log(headerapi);
}
private extractData(res: Response) {
  let body = res.json();
  return body.data || {};
}
private handleError(error: Response | any) {
let errMsg: string;
if (error instanceof Response) {
  const body = error.json() || '';
  const err = body.error || JSON.stringify(body);
  errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
  errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
 }
}

我想從響應中獲取標題，在這種情況下是資源

任何的想法？

Answer 1

清晰的角度5回答

默認情況下，this.http.whatever返回的observable將返回返回的數據 ，而不是HttpResponse。

如果你有一個峰值： https ：//angular.io/api/common/http/HttpClient你會注意到這些選項采用了HttpObserve類型的“觀察”參數。 雖然沒有記錄HttpObserve是什么，如果你把它作為“響應”，那么你將收到一個HttpResponse<T>的實例HttpResponse<T> （ https://angular.io/api/common/http/HttpResponse ）

所以，這是一個示例請求：

this.http.get(url, {observe: 'response'})
    .subscribe(resp => console.log(resp.headers))

注意：由於瀏覽器的cors安全性，除非API提供Access-Control-Expose-Headers:否則您將無法看到標Access-Control-Expose-Headers:如果您的api和angular應用程序沒有相同的域，則使用自定義標頭。

Answer 2

標頭是Response類的一部分，因此您應該能夠在類似的處理程序中看到它們

http.get('/path/to/resource')
  .subscribe((res:Response) => {
    console.log(res.headers);
    // you can assign the value to any variable here
  });

Answer 3

當你執行.map(this.extractData) ，來自this.extractData函數的let body = res.json()從除了body之外的響應中取出所有內容。

相反，如果你執行跟隨， .map((res: Response) => res) ，它將返回整個響應，您可以訪問所有屬性並將它們分配給變量。

這是一個Plunker 演示 。

Answer 4

下面將介紹Angular 5中的一個奇特的例子。 使用HttpClient發布到GraphQL服務器，讀取響應，然后提取響應頭值和響應正文值。 在這種情況下，標題是Total-Count 。 汽車是一個領域（汽車陣列）在身體的另一個領域數據 。 還顯示了使用rxjs 第一個運算符。

import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { first } from 'rxjs/operators/first'; 
import { Car, CarPage } from '../models/car';  
..........
..........

public find(filter: string, sort: string, limit: number): Observable<CarPage> {
  let headers = new HttpHeaders().set("Content-Type", "application/graphql");
  let carPage: CarPage = { cars: [], totalCount: 0 };
  return this.http.post<HttpResponse<any>>('/graphql',
    `query cars { cars(filter: "${filter}", sort: "${sort}", limit: ${limit}) {
          id
          make
          model
          year 
        }
      }`,
      { headers: headers, observe: "response" }
  )
  .first((_, index) => index === 0, (response: HttpResponse<any>) => {
    let totalCountHeaderValues = response.headers.getAll("Total-Count");
    carPage.totalCount = (totalCountHeaderValues.length > 0) ? parseInt(totalCountHeaderValues[0]) : 0;  
    carPage.cars = response.body.data.cars; 
    return carPage; 
  })
}

Answer 5

角度Http.get方法的返回類型返回Response類型。 此對象有一個標頭對象，其中包含有關標頭的信息。 它還有一個網址屬性。

this.http.get(url).map(resp => console.log(resp));