Angular 4 erhalten Header von API-Antwort

Question

Ich sende eine Anfrage an eine API, es gibt eine Reihe von Daten zurück, aber ich weiß nicht, wie Sie die Header aus dieser URL extrahieren, das ist, was ich versucht habe meinen Dienst

@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); 
} 
} 

ich möchte in diesem Fall die Header aus dieser Antwort zu bekommen, dass resourceurl ist

irgendeine Idee?

Answer 1

Die Header sind Teil des Response class, so sollten Sie in der Lage sein, sie wie

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

Answer 2

Der Rückgabetyp der Winkel Http.get Methode in einem Handler zu sehen gibt einen Antworttyp. Dieses Objekt verfügt über ein Header-Objekt, das Informationen zu den Headern enthält. Es hat auch eine URL-Eigenschaft.

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

Answer 3

Wenn Sie .map(this.extractData) tun die let body = res.json() von this.extractData Funktion übernimmt mit Ausnahme der body aus der Antwort alles aus.

Stattdessen, wenn Sie folgendes tun, .map((res: Response) => res), die die gesamte Antwort zurückgibt und Sie können auf alle Attribute zugreifen und sie Variablen zuweisen.

Hier ist ein Plunker demo.

Answer 4

Ein etwas exotischeres Beispiel in Angular 5, das unten gezeigt wird. Verwenden Sie HttpClient, um auf einen GraphQL-Server zu schreiben, lesen Sie die Antwort und extrahieren Sie dann einen Antwortheaderwert und einen Antworttextwert. Der Header ist Gesamt-Count in diesem Fall. Autos ist ein Feld (Array von Auto) unter einem anderen Feld Daten in den Körper. Zeigt auch die Verwendung der Rxjs ersten Operator anstelle von abonnieren.

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

Klar Winkel 5 Antwort

standardmäßig wird this.http.whatever ist wieder beobachtbaren auf den Daten zurückgegeben, nicht der Httpresponse.

Wenn Sie einen Spitzenwert haben: https://angular.io/api/common/http/HttpClient Sie werden feststellen, dass die Optionen einen "beobachten" -Parameter haben. Zwar ist es nicht dokumentiert ist, was die Optionen sind, wenn Sie es als „Antwort“ setzen, dann werden Sie stattdessen eine Instanz von HttpResponse<T> (https://angular.io/api/common/http/HttpResponse) erhalten

So, hier ist ein Beispiel Anfrage:

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

Hinweis: Aufgrund der Browsersicherheit können Sie keine Header sehen, es sei denn, die API stellt Access-Control-Expose-Headers: mit Ihren benutzerdefinierten Headern zur Verfügung, wenn Ihre API und Ihre eckige App nicht dieselbe Domain haben.