web-dev-qa-db-fra.com

Angular 4 obtenir les en-têtes de la réponse de l'API

J'envoie une requête à une API, elle retourne un tableau de données, mais je ne sais pas comment extraire les en-têtes de cette URL, c'est ce que j'ai essayé dans mon service.

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

Je veux obtenir les en-têtes de cette réponse qui est dans ce cas resourceurl

une idée?

javascriptangulartypescript
12
Lrawls

Les en-têtes font partie de Response class , vous devriez donc pouvoir les voir dans un gestionnaire comme

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

Effacer angular 5 réponses

Par défaut, cet observable retourné sera celui-ci sur le data, pas le HttpResponse.

Si vous avez un pic à: https://angular.io/api/common/http/HttpClient Vous remarquerez que les options prennent un paramètre "observer" d'un type HttpObserve. Bien que HttpObserve ne soit pas documenté, si vous le définissez comme "réponse", vous recevrez une instance de HttpResponse<T> ( https://angular.io/api/common/http/HttpResponse) )

Alors, voici un exemple de demande:

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

Note: En raison de la sécurité des navigateurs, vous ne pourrez pas voir les en-têtes à moins que l'API ne fournisse Access-Control-Expose-Headers: avec vos en-têtes personnalisés si votre api et angular app n'ont pas le même domaine.

13
csga5000

Quand vous faites .map(this.extractData), la fonction let body = res.json() de this.extractData Supprime tout de la réponse, à l'exception de body.

Si vous suivez .map((res: Response) => res), la réponse sera renvoyée dans son intégralité. Vous pourrez accéder à tous les attributs et les affecter à des variables.

Voici un Plunker démo .

8
Nehal

Voici un exemple un peu plus exotique dans Angular 5 ci-dessous. Utilisation de HttpClient pour publier sur un serveur GraphQL, lire la réponse, puis extraire une valeur d'en-tête de réponse et une valeur de corps de réponse. L'en-tête est Total-Count dans ce cas cars est un champ (tableau de Car) situé sous un autre champ données dans le corps. Affiche également l'utilisation de la rxjs premier opérateur.

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; 
  })
}
2
leoncc

Le type de retour de la méthode angular Http.get renvoie un type de réponse. Cet objet a un objet en-têtes contenant des informations sur les en-têtes. Il possède également une propriété url.

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