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.