Angular 4.3.3 HttpClient: как получить значение из заголовка ответа?

(Редактор: VS Code; машинопись: 2.2.1)

Цель состоит в том, чтобы получить заголовки ответа запроса

Предположим, что запрос POST с HttpClient в службе

import {
    Injectable
} from "@angular/core";

import {
    HttpClient,
    HttpHeaders,
} from "@angular/common/http";

@Injectable()
export class MyHttpClientService {
    const url = 'url';

    const body = {
        body: 'the body'
    };

    const headers = 'headers made with HttpHeaders';

    const options = {
        headers: headers,
        observe: "response", // to display the full response
        responseType: "json"
    };

    return this.http.post(sessionUrl, body, options)
        .subscribe(response => {
            console.log(response);
            return response;
        }, err => {
            throw err;
        });
}

Угловая документация HttpClient

Первая проблема заключается в том, что у меня есть ошибка машинописного файла:

'Argument of type '{ 
    headers: HttpHeaders; 
    observe: string; 
    responseType: string;
}' is not assignable to parameter of type'{ 
    headers?: HttpHeaders;
    observe?: "body";
    params?: HttpParams; reportProgress?: boolean;
    respons...'.

Types of property 'observe' are incompatible.
Type 'string' is not assignable to type '"body"'.'
at: '51,49' source: 'ts'

В самом деле, когда я перехожу к методу post(), я указываю на этот прототип (я использую VS-код)

post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable<ArrayBuffer>;

Но я хочу этот перегруженный метод:

post(url: string, body: any | null, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable<HttpResponse<Object>>;

Итак, я попытался исправить эту ошибку с помощью этой структуры:

  const options = {
            headers: headers,
            "observe?": "response",
            "responseType?": "json",
        };

И он компилируется! Но я просто получаю запрос тела, как в json формате.

Кроме того, почему я должен поставить? символ в конце некоторого имени полей? Как я увидел на сайте машинописного сайта, этот символ должен просто указать пользователю, что он является необязательным?

Я также пытался использовать все поля, без и с? Метки

РЕДАКТИРОВАТЬ

Я попробовал решения, предложенные Angular 4, получить заголовки от ответа API. Для решения карты:

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

Компилятор scriptcript говорит, что карта не существует, потому что она не является частью Observable

Я также пробовал это

import { Response } from "@angular/http";

this.http.post(url).post((resp: Response) => resp)

Он компилируется, но я получаю неподдерживаемый ответ типа Media. Эти решения должны работать для "Http", но это не относится к "HttpClient".

EDIT 2

Я получаю также неподдерживаемый тип мультимедиа с помощью решения @Supamiu, поэтому это будет ошибка в моих заголовках. Таким образом, второе решение сверху (с типом ответа) также должно работать. Но personnaly, я не думаю, что это хороший способ смешать "Http" с "HttpClient", поэтому я сохраню решение Supamiu

Ответ 1

Вы можете наблюдать полный ответ, а не только содержание. Для этого необходимо передать observe: response в параметр options вызова функции.

http
  .get<MyJsonData>('/data.json', {observe: 'response'})
  .subscribe(resp => {
    // Here, resp is of type HttpResponse<MyJsonData>.
    // You can inspect its headers:
    console.log(resp.headers.get('X-Custom-Header'));
    // And access the body directly, which is typed as MyJsonData as requested.
    console.log(resp.body.someField);
  });

См. документацию HttpClient.

Ответ 2

основная проблема приведения типов, поэтому мы можем использовать "ответ" как "тело",

мы можем обращаться как

const options = {
    headers: headers,
    observe: "response" as 'body', // to display the full response & as 'body' for type cast
    responseType: "json"
};

return this.http.post(sessionUrl, body, options)
    .subscribe(response => {
        console.log(response);
        return response;
    }, err => {
        throw err;
    });

Ответ 3

В самом деле, главная проблема заключалась в проблеме машинописного машиностроения.

В коде post() параметры были объявлены непосредственно в параметрах, поэтому в качестве "анонимного" интерфейса.

Решение заключалось в том, чтобы напрямую вводить параметры в raw внутри параметров

http.post("url", body, {headers: headers, observe: "response"}).subscribe...

Ответ 4

Если вы используете решение из верхнего ответа и у вас нет доступа к .keys() или .get() в response.headers, убедитесь, что вы используете fetch, а не xhr.

Запросы на выборку используются по умолчанию, но Angular будет использовать xhr, если присутствуют только заголовки xhr (например, x-www-form-urlencoded).

Если вы пытаетесь получить доступ к любым настраиваемым заголовкам ответа, вам нужно указать эти заголовки с помощью другого заголовка с именем Access-Control-Expose-Headers.