За день я погуглил-пролистал-скопировал множество ответов, поэтому я собираюсь начать этот пост с tl; dr - если вы здесь, чтобы исправить, просто прочитайте первую часть. Если вам интересно узнать больше о том, что происходит (варианты использования, методы и т. Д.), Читайте дальше!
Заголовки скрыты в методе entries()
, который возвращает не объект, а итератор, который затем предоставляет доступ к заголовкам в формате ключ / значение через цикл for...of
. (Подробнее об этом на сайте MDN)
Например, если вы fetch
мой сайт и выйдете из цикла, вы получите следующее:
// code fetch('https://stevemiller.dev') .then((response) => { for (var pair of response.headers.entries()) { console.log(pair[0]+ ': '+ pair[1]); } });
// logs cache-control: max-age=600 content-type: text/html; charset=utf-8 expires: Sun, 07 Jul 2019 03:54:43 GMT last-modified: Sun, 07 Jul 2019 03:43:47 GMT
Подробнее: Использование заголовка ответа
Некоторые RESTful API используют заголовки ответов для указания важной информации после вызова. Например, некоторые сторонние API-интерфейсы будут включать информацию о текущих ограничениях скорости в настраиваемые заголовки.
В моем случае я использовал удобный пакет json-server для некоторых тестовых данных.
При выполнении запроса к набору данных json-server он возвращает заголовок с общим количеством результатов для этого запроса, чтобы помочь с разбивкой на страницы (x-total-count
).
Javascript Fetch API
Используя интерфейс React, я вызывал API json-сервера, используя встроенную функциональность выборки с Javascript:
fetch(`/events?q=${query}&_page=${page}`)
.then((response) => {
return response.json();
})
// then setting state, etc
(Мне нравится fetch
, потому что он встроен в Javascript, поэтому нет необходимости в дополнительном пакете)
Но, чтобы помочь с разбивкой на страницы, мне нужно было точно знать, сколько «страниц» контента может предоставить этот запрос. Доступ к таким заголовкам регистрирует пустой объект:
console.log(reponse.headers);
// output: Headers {}
Это потому, что заголовки не объекта, это iterator
Доступ к заголовкам с помощью for...of
и entries()
Вы не можете напрямую получить доступ к заголовкам в ответе на вызов fetch
- вам нужно выполнить итерацию после использования метода entries()
для заголовков. Пример кода (с использованием реакции и поиском количества запросов) ниже:
fetch(`/events?q=${query}&_page=${page}`)
.then((response) => {
for (var pair of response.headers.entries()) { // accessing the entries
if (pair[0] === 'x-total-count') { // key I'm looking for in this instance
this.setState({
total: pair[1] // saving that value where I can use it
})
}
}
return response.json();
});
Отсюда вы можете создать свой собственный объект с помощью цикла или отфильтровать определенные значения (как я сделал в верхней части сообщения).
Первоначально опубликовано на https://stevemiller.dev 6 июля 2019 г.